在前端開發(fā)中有一部分的用戶行為會頻繁的觸發(fā)事件執(zhí)行，而對于DOM操作、資源加載等耗費性能的處理，很可能導致界面卡頓，甚至瀏覽器的崩潰。函數(shù)節(jié)流(throttle)和函數(shù)防抖(debounce)就是為了解決類似需求應運而生的。

函數(shù)節(jié)流(throttle)

函數(shù)節(jié)流就是預定一個函數(shù)只有在大于等于執(zhí)行周期時才執(zhí)行，周期內(nèi)調(diào)用不執(zhí)行。好像水滴攢到一定重量才會落下一樣。

場景：

實現(xiàn)：

function throttle(method, delay){  var last = 0;  return function (){    var now = +new Date();    if(now - last > delay){      method.apply(this,arguments);      last = now;    }  }}document.getElementById('throttle').onclick = throttle(function(){console.log('click')},2000);

underscore實現(xiàn)：

_.throttle = function(func, wait, options) {  var context, args, result;  var timeout = null;  var previous = 0;  if (!options) options = {};  var later = function() {    previous = options.leading === false ? 0 : _.now();    timeout = null;    result = func.apply(context, args);    if (!timeout) context = args = null;  };  return function() {    var now = _.now();    if (!previous && options.leading === false) previous = now;    //計算剩余時間    var remaining = wait - (now - previous);    context = this;    args = arguments;    //剩余時間小于等于0或者剩余時間大于等待時間(本地時間變動出現(xiàn))    if (remaining <= 0 || remaining > wait) {      if (timeout) {        clearTimeout(timeout);        timeout = null;      }      previous = now;      result = func.apply(context, args);      if (!timeout) context = args = null;    } else if (!timeout && options.trailing !== false) {      timeout = setTimeout(later, remaining);    }    return result;  };};  

函數(shù)防抖(debounce)

函數(shù)防抖就是在函數(shù)需要頻繁觸發(fā)情況時，只有足夠空閑的時間，才執(zhí)行一次。好像公交司機會等人都上車后才出站一樣。

場景：

實現(xiàn)：

function debounce(method, delay){  var timer = null;  return function(){    var context = this,args = arguments;    clearTimeout(timer);    timer = setTimeout(function(){      method.apply(context, args);    },delay);  }}document.getElementById('debounce').onclick = debounce(function(){console.log('click')},2000);

underscore實現(xiàn)：

_.debounce = function(func, wait, immediate) {  var timeout, args, context, timestamp, result;  var later = function() {    var last = _.now() - timestamp;    if (last < wait && last >= 0) {      timeout = setTimeout(later, wait - last);    } else {      timeout = null;      if (!immediate) {        result = func.apply(context, args);        if (!timeout) context = args = null;      }    }  };  return function() {    context = this;    args = arguments;    timestamp = _.now();    var callNow = immediate && !timeout;    if (!timeout) timeout = setTimeout(later, wait);    if (callNow) {      result = func.apply(context, args);      context = args = null;    }    return result;  };};