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代碼，單單使用定時器去控制，均可以實現同樣的效果