防抖和節流

應用場景

防抖和節流都是用來防止高頻率的js代碼的執行

防抖

• 防抖本質上就是以最後的操作爲標準
  打個比方，此時此刻我們都在排隊等公交，司機說必須等到坐滿纔會發車，這時候的參照標準就是最後一個人上車，公交車好比我們的js代碼，最後一個人就充當我們的執行條件。
  看代碼：

let setTimer;
let shake = function() {
  clearTimeout(setTimer);
  setTimer = setTimeout(() => {
    console.log("這裏是實際的業務代碼");
  }, 0);
};

let interTimer = setInterval(() => {
  shake();
}, 0);

let timer = setTimeout(() => {
  clearInterval(interTimer);
  clearTimeout(timer);
  timer = null;
  interTimer = null;
}, 2000);

執行以上代碼，控制檯會在 2s 後打出日誌，2s 之內的操作都被清空，以最後一次的操作爲準。

如果你在監聽滾動事件，假設兩秒以內用戶在不斷的平凡的觸發onScroll事件，只有用戶暫停滾動後，纔會去執行響應的操作，代碼如下

// 函數防抖
var timer = false;
document.getElementById("xxxx").onscroll = function(){
    clearTimeout(timer); // 清除未執行的代碼，重置回初始化狀態
    timer = setTimeout(function(){
        console.log("函數防抖");
    }, 300);
};

節流

• 定時器實現節流

let isAllow = true;
function shake() {
  let fun = function() {
    if (!isAllow) return;
    isAllow = false;
    let timer = setTimeout(() => {
      console.log("這裏是實際的業務代碼");
      clearTimeout(timer);
      timer = null;
      isAllow = true;
    }, 1000);
  };
  fun();
}
let interTimer = setInterval(() => {
  shake();
}, 0);

執行以上代碼你講會看到控制檯每隔 1s 後打印出結果，1s 內不會執行打印日誌

• 閉包實現函數節流：

// fn是我們需要包裝的事件回調, interval是時間間隔的閾值
function throttle(fn, interval) {
  let last = 0; // last爲上一次觸發回調的時間
  // 將throttle處理結果當作函數返回
  return function() {
    let context = this; // 保留調用時的this上下文
    let args = arguments; // 保留調用時傳入的參數
    let now = +new Date(); // 記錄本次觸發回調的時間
    // 判斷上次觸發的時間和本次觸發的時間差是否小於時間間隔的閾值
    if (now - last >= interval) {
      // 如果時間間隔大於我們設定的時間間隔閾值，則執行回調
      last = now;
      fn.apply(context, args);
    }
  };
}
// 用throttle來包裝scroll的回調
const better_scroll = throttle(() => console.log("觸發了滾動事件"), 1000);
setInterval(() => better_scroll(), 0);

更多的乾貨請點擊這裏
react-native 實戰項目學習
歡迎各位看官的批評和指正，共同學習和成長
希望該文章對您有幫助，也希望得到您的鼓勵和支持