js 去抖技术应用例子

时间 2019-12-08

原文原文链接

js 去抖技术的话，一百度下来，都是比较简单的代码示例，可是看起来，都不知道怎么引用，有点难下手。javascript

并且对它的原理也不是很明白。html

例子：java

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(
  	 debounce(function (event) {//被代理的方法，须要执行的方法
     // 能够使用 arguments 来获取 去抖技术返回的 方法参数 
     alert(222222);
		}, 250)
	  
  	);
	
});
	
function debounce(fn, delay) {
  var timer = null;
  return function () {
    var context = this, args = arguments;//arguments值得的是 这个方法的参数
    clearTimeout(timer);
    timer = setTimeout(function () {
      //代理方法执行 ， args 实际上是一个数组，放入的是，被代理方法的参数，能够在这里进行设置参数
      // 好比  args=['aa'];
      fn.apply(context, args);
    }, delay);
  };
}

</script>
</head>
<body>
<p>若是你点我，我就会消失。</p>
<p>继续点我!</p>
<p>接着点我!</p>
</body>
</html>

使用到了定时器，这个很容易看明白。 jquery

上例子中就是点击的时候，返回一个定时器方法，在定时器里面，代理执行传入的方法 fn .数组

也就是去抖技术，会返回最后一次操做须要执行的方法。而后该方法会定时自动执行。app

使用到了比较原生的js 技术，百度一下 apply , arguments 等即很容易看明白了this

总结代理

去抖技术的核心思想就是定时器的使用。 code

若是再次执行方法的时候，定时器存在，就去掉，而后新建一个定时器对象。cdn

这样就会每次都是会执行最新的操做了。

因此就算不用去抖技术的 demo代码，单单使用定时器去控制，均可以实现同样的效果