首頁 > web前端 > js教程 > javascript中的throttle和debounce淺析_基礎知識

javascript中的throttle和debounce淺析_基礎知識

WBOY
發布: 2016-05-16 16:45:54
原創
930 人瀏覽過

throttle

我們這裡說的throttle就是函數節流的意思。再說的通俗一點就是函數呼叫的頻度控制器,就是連續執行時間間隔控制。主要應用的場景例如:

1.滑鼠移動,mousemove 事件
2.DOM 元素動態定位,window物件的resize和scroll 事件

有人形象的把上面說的事件形象的比喻成機關槍的掃射,throttle就是機關槍的扳機,你不放扳機,它就一直掃射。我們開發時用的上面這些事件也是一樣,你不放開滑鼠,它的事件就一直觸發。例如:

複製程式碼 程式碼如下:

var resizeTimer=null;


var resizeTimer=null;
$null; window).on('resize',function(){
       if(resizeTimer){
          er=setTimeout(function(){
           console.log( "window resize");
       },400);

debounce

debounce和throttle很像,debounce是空閒時間必須大於或等於 一定值的時候,才會執行呼叫方法。 debounce是空閒時間的間隔控制。例如我們做autocomplete,這時需要我們很好的控制輸入文字時呼叫方法時間間隔。一般時第一個輸入的字元馬上開始調用,根據一定的時間間隔重複調用執行的方法。對於變態的輸入,例如按住某一個建不放的時候特別有用。


debounce主要應用的場景例如:

文字輸入keydown 事件,keyup 事件,例如做autocomplete


這類網路上的方法有很多,例如Underscore.js就對throttle和debounce進行封裝。 jQuery也有一個throttle和debounce的插件:jQuery throttle / debounce,所有的原理時一樣的,實現的也是同樣的功能。再奉上一個自己一直再用的throttle和debounce控制函數:

程式碼如下:

/*
* 頻率控制回傳函數連續呼叫時,fn 執行頻率限定為每多少時間執行一次
* @param fn {function}  需要呼叫的函數
* @param delay  {number}    延遲時間,單位毫秒
* @param immediate  {bool} 給immediate參數傳遞false 綁定的函數先執行,而不是delay後執行。
* @return {function}實際呼叫函數
*/
var throttle = function (fn,delay, immediate, debounce) {
   var curr = new Date(),//當前事件
   var curr = new Date(),//當前事件
   var curr = new Date(),//當前事件
   var curr = new Date(),//當前事件
       last_call = 0,
       last_exec = 0,
      ,//上下文
       args,
       exec = function () {
           last_exec = curr;
           fn.apply(context, args);       context = this,
       args = arguments,
       diff = curr - (debounce ? last_call : last_exec) - delay;
   ); bounce) {
           if (immediate) {
timer = setTimeout(exec, delay);
           } else if (diff >= 0) {
      }
       } else {
           if (diff >= 0) {
               exec();
           }  , -diff);
           }
       }
       last_call = curr
      🎜>};

/*
* 當空閒控制回傳函數連續呼叫時,空閒時間必須大於或等於delay,fn 才會執行
* @param fn {function}  要呼叫的函數
* @param delay   {number}    空閒時間
* @param immediate  {bool} 給immediate參數傳遞false 綁定的函數先執行,而不是delay後再執行。
* @return {function}實際呼叫函數
*/

var debounce = function (fn, delay, immediate) {
   return throttle(fn, delay, immediate) {
   return throttle(fn, delay, immediate, true);


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板