防抖（debounce）和節流（throttle）---解決事件頻繁觸發造成頁面卡死

coordinate35 發布于2019-08-23 18:13 / 2787人閱讀

摘要：防抖和節流連續觸發觸發頻率很高的時間，不進行優化，會出現頁面卡頓現象。節流防抖是多次觸發事件，目標函數只執行一次，不管觸發這些事件用了多少時間。

防抖（debounce）和節流（throttle）

連續觸發（觸發頻率很高）的時間，不進行優化，會出現頁面卡頓現象。
常見的需要優化的事件：

鼠標事件:

mousemove（拖拽）

mouseover(劃過)

mouseWheel(滾屏)

鍵盤事件：

keydown(按下鍵盤)

keypress（按下字符鍵盤）

keyup(彈起鍵盤)

window resize/scroll

DOM 元素動態定位

優化方式是控制事件處理器在一段時間內的執行次。

防抖

頻繁（連續）觸發事件（比如用戶觸發輸入事件input），不執行目標動作，當不在觸發事件了，再執行。

實現思路，在事件處理器內，使用 setTimeout 包裹目標動作，一直觸發事件，就清除上次的定時器，不再觸發觸發事件，會執行最后一個定時器，目標動作也執行一次了。

JS代碼：

function debounce(callback, delay) {
  let timeout = 0;
  return e => {
    console.log("清除", timeout, new Date());
    clearTimeout(timeout); //input 一直觸發，就清除上一次的定時器，防止執行目標函數，直到事件不觸發事件，最后一個定時器沒有清除，delay 時間后就會執定時器，就確保了目標函數只執行一次。
    timeout = setTimeout(() => {
      callback(e);
    }, delay);
    console.log("新的", timeout, e.target.value, new Date());
  };
}
let print = debounce(e => {
  let value = e.target.value;
  console.log(value, new Date());
}, 1000);
document
  .querySelector("#input")
  .addEventListener("input", print, false);

清除定時器的時機很關鍵，在新定時器生成之前，如果在之后，會將所有定時器都清除，目標函數一次都不執行。

節流

防抖是多次觸發事件，目標函數只執行一次，不管觸發這些事件用了多少時間。而節流是在一段時間內，確保目標函數只執行一次，實現緩慢執行目標函數的效果。

上面的輸入使用節流實現：

let thorttle = (callback, delay) => {
  let timeout = 0;
  let now = new Date() - 0;
  return e => {
    console.log("now", now);
    let last = new Date() - 0;
    clearTimeout(timeout);
    if (last - now >= delay) {
      console.log("時間間隔", last - now);
      callback(e);
      now = last;//將上執行的時間賦值給 now
    } else {
      //將 delay 時間內多次觸發事件，目標函數合并到這里執行
      timeout = setTimeout(() => {
        callback(e);
      }, delay);
    }
  };
};
let write = thorttle(e => {
  console.log(e.target.value, new Date());
}, 5000);
document
  .querySelector("#input")
  .addEventListener("input", write, false);

兩者比較

節流在某個時間段內，目標函數能執行一次，限制目標函數的執行頻率，不管事件觸發了多少次；
防抖是多次觸發事件，目標函數只執行一次，不管觸發了這些事件用了多少時間。

節流函數限制目標函數的執行頻率，有連續變化的效果，適用于關注變化過程的操作，可以調整目標函數執行頻率使得變化更加平滑，比如動畫、改變窗口時執行某些操作等，常用事件resize、scroll、mouseWheel、touchmove、mouseover等；

防抖函數適用于更關注結果的操作，不太關注操作過程，常見的事件有 input、keyup等。

最后看一個將防抖和節流都用 resize 事件的效果，更能體會兩者的區別：

function debounce(callback, delay) {
  let timeout = 0;
  return e => {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      callback(e);
    }, delay);
  };
}
let print = debounce(e => {
  let value = e.target.value;
  console.log("debounce", window.innerWidth);
}, 500);
let thorttle = (callback, delay) => {
  let timeout = 0;
  let now = new Date() - 0;
  return e => {
    let last = new Date() - 0;
    clearTimeout(timeout);
    if (last - now >= delay) {
      callback(e);
      now = last;
    } else {
      timeout = setTimeout(() => {
        callback(e);
      }, delay);
    }
  };
};
let write = thorttle(e => {
  console.log("thorttle", window.innerWidth);
}, 500);
window.addEventListener("resize", write, false);
window.addEventListener("resize", print, false);

參考

函數節流與函數防抖
函數防抖與函數節流

云服務器 GPU云服務器 VUE防抖與節流事件觸發事件觸發器 java事件觸發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104855.html

防抖（debounce）和節流（throttle）---解決事件頻繁觸發造成頁面卡死

摘要：防抖和節流連續觸發觸發頻率很高的時間，不進行優化，會出現頁面卡頓現象。節流防抖是多次觸發事件，目標函數只執行一次，不管觸發這些事件用了多少時間。防抖（debounce）和節流（throttle）連續觸發（觸發頻率很高）的時間，不進行優化，會出現頁面卡頓現象。常見的需要優化的事件：鼠標事件: mousemove（拖拽） mouseover(劃過) mouseWheel(滾屏)...

IamDLY 2019-08-02 15:21 評論0 收藏0
JS之節流和防抖

摘要：節流在指定時間之內，讓函數只觸發一次。防抖對于一定時間段的連續的函數調用，只讓其執行一次。總結以上只是很簡單的寫了一下節流和防抖的原理，在里，實現起來更加復雜，但是背后的原理核心就是上邊代碼寫的。概述在平時的開發中，經常會聽到兩個差不多很相近的詞。節流（throttle）和防抖（debounce）。這是兩個類似又有些不同的優化方案。節流：在指定時間之內，讓函數只觸發一次。防...

fevin 2019-08-26 17:15 評論0 收藏0
函數防抖(debounce)和節流(throttle)以及lodash的debounce源碼賞析

摘要：防抖函數防抖和節流是一對常常被放在一起的場景。同時，這里會設置一個定時器，在等待后會執行，的主要作用就是觸發。最后，如果不再有函數調用，就會在定時器結束時執行。函數節流和去抖的出現場景，一般都伴隨著客戶端 DOM 的事件監聽。比如scroll resize等事件，這些事件在某些場景觸發非常頻繁。比如，實現一個原生的拖拽功能（不能用 H5 Drag&Drop API），需要一路監聽...

Enlightenment 2019-08-23 13:50 評論0 收藏0
Javascript 面試中經常被問到的三個問題！

摘要：相反，在討論時，面試中通常會提到三件事。而認為最后一個參賽者說了算，只要還能吃的，就重新設定新的定時器。試想，如果用戶的操作十分頻繁他每次都不等設置的時間結束就進行下一次操作，于是每次都為該用戶重新生成定時器，回調函數被延遲了不計其數次。本文不是討論最新的 JavaScript 庫、常見的開發實踐或任何新的 ES6 函數。相反，在討論 JavaScript 時，面試中通常會提到三件事。我自己...

chnmagnus 2019-05-23 12:20 評論0 收藏0
函數節流和防抖

摘要：當第二次調用該函數時，它會清除前一次的定時器并設置另一個。然而，如果前一個定時器尚未執行，其實就是將其替換為一個新的定時器，然后延遲一定時間再執行。參考文章函數節流與函數防抖函數節流和函數去抖應用場景辨析函數節流函數防抖實現原理分析前言事件的觸發權很多時候都屬于用戶，有些情況下會產生問題：向后臺發送數據，用戶頻繁觸發，對服務器造成壓力一些瀏覽器事件:window.onresi...

didikee 2019-08-23 13:50 評論0 收藏0