js 去抖技術應用例子
阿新 • • 發佈：2018-11-26
js 去抖技術的話， 一百度下來， 都是比較簡單的程式碼示例，但是 看起來，都不知道怎麼引用，有點難下手。
而且對它的原理也不是很明白。
例子：
<!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>
使用到了定時器， 這個很容易看明白。
上例子中就是 點選的時候， 返回一個定時器方法，在定時器裡面，代理執行傳入的方法 fn .
也就是 去抖技術，會返回 最後一次 操作 需要執行的方法。 然後該方法會定時自動執行。
使用到了 比較原生的js 技術， 百度一下 apply , arguments 等 即很容易看明白了
總結
去抖技術的 核心思想就是 定時器的使用。
如果再次 執行方法的時候，定時器存在，就去掉，然後新建一個 定時器物件。
這樣就會每次都是會執行最新的操作了。
所以就算不用 去抖技術的 demo程式碼， 單單使用定時器去控制， 都可以 實現一樣的效果