淺談JS函數(shù)節(jié)流防抖

更新時間：2017年10月18日 10:15:50 作者：vist

本篇文章主要介紹了JS函數(shù)節(jié)流防抖，函數(shù)節(jié)流和函數(shù)防抖為了解決類似需求應(yīng)運而生的，有興趣的可以了解一下

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

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

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

場景：

窗口調(diào)整（resize）
頁面滾動（scroll）
搶購瘋狂點擊（mousedown）

實現(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í)行一次。好像公交司機會等人都上車后才出站一樣。

場景：

實時搜索（keyup）
拖拽（mousemove）

實現(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;
  };
};

函數(shù)節(jié)流(throttle)和函數(shù)防抖(debounce)都是通過延時邏輯操作來提升性能的方法，在前端優(yōu)化中是常見且重要的解決方式?？梢詮母拍詈蛯嶋H應(yīng)用中理解兩者的區(qū)別，在需要的時候選擇合適的方法處理。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: