JS debounce和throttle 去抖和節流 - bhaltair－IT工程師數位筆記本

文章出處

JS中的高頻事件有scroll recize mouseover。如果頻繁觸發事件綁定函數，會導致瀏覽器性能上的損失。

因此我們通常會添加延遲執行的邏輯。

在underscore.js里面有debounce和throttle這兩個方法。

throttle創建并返回一個節流閥一樣的函數，當重復調用函數的時候，至少每隔wait毫秒調用一次該函數。

var throttled = _.throttle(updatePosition, 100);
$(window).scroll(throttled);

debounce函數，去抖，是講延遲函數的執行在函數最后一次調用的wait毫秒之后，比如當窗口停止改變大小之后重新計算布局。

可以這樣理解，像彈簧一樣，只有你松開壓住彈簧的手，彈簧才會向上彈起。

也就是說當調用動作n毫秒后，才會執行該動作，若在這n毫秒內又調用此動作則將重新計算執行時間。

1 var lazyLayout = _.debounce(calculateLayout, 300);
2 $(window).resize(lazyLayout);

View Code

//簡單實現一個debonce
var debonce = function(fn,idle){
  var last = null;
  return function() {
    var ctx = this, args = arguments;
    clearTimeout(last);
    last = setTimeout(function(){
      fn.apply(ctx,args);
    },idle)  
  }       
}

文章列表