JS debounce和throttle 去抖和節流

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

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