本文共 2000 字，讀完只需 8 分鐘

上一篇文章講了去抖函數(shù)，然后這一篇講同樣為了優(yōu)化性能，降低事件處理頻率的節(jié)流函數(shù)。

一、什么是節(jié)流？

節(jié)流函數(shù)（throttle）就是讓事件處理函數(shù)（handler）在大于等于執(zhí)行周期時才能執(zhí)行，周期之內(nèi)不執(zhí)行，即事件一直被觸發(fā)，那么事件將會按每小段固定時間一次的頻率執(zhí)行。

打個比方：王者榮耀、英雄聯(lián)盟、植物大戰(zhàn)僵尸游戲中，技能的冷卻時間，技能的冷卻過程中，是無法使用技能的，只能等冷卻時間到之后才能執(zhí)行。

那什么樣的場景能用到節(jié)流函數(shù)呢？
比如：

頁面滾動和改變大小時需要進行業(yè)務處理，比如判斷是否滑到底部，然后進行懶加載數(shù)據(jù)。

按鈕被高頻率地點擊時，比如游戲和搶購網(wǎng)站。

我們通過一個簡單的示意來理解：

節(jié)流函數(shù)可以用時間戳和定時器兩種方式進行處理。

二、時間戳方式實現(xiàn)

<div class="container" id="container">正在滑動：0 </div><script> window.onload = function() {var bodyEl = document.getElementsByTagName("body")[0] }var count = 0; window.onmousemove = throttle(eventHandler, 1000);function eventHandler(e) {var containerEl = document.getElementById("container");containerEl.innerHTML = "正在滑動: " + count;count++; }function throttle(func, delay) {var delay = delay || 1000;var previousDate = new Date();var previous = previousDate.getTime(); // 初始化一個時間，也作為高頻率事件判斷事件間隔的變量，通過閉包進行保存。return function(args) {var context = this;var nowDate = new Date();var now = nowDate.getTime();if (now - previous >= delay) { // 如果本次觸發(fā)和上次觸發(fā)的時間間隔超過設定的時間func.call(context, args); // 就執(zhí)行事件處理函數(shù) （eventHandler）previous = now; // 然后將本次的觸發(fā)時間，作為下次觸發(fā)事件的參考時間。}} } </script>

看時間戳實現(xiàn)版本的效果：

三、定時器方式實現(xiàn)

<div class="container" id="container">正在滑動: 0 </div><script> window.onload = function() {var bodyEl = document.getElementsByTagName("body")[0] }var count = 0; window.onmousemove = throttle(eventHandler, 1000);function eventHandler(e) {var containerEl = document.getElementById("container");containerEl.innerHTML = "正在滑動: " + count;count++; }function throttle(func, delay) {var delay = delay || 1000;var timer = null;return function(args) {var context = this;var nowDate = new Date();var now = nowDate.getTime();if (!timer) {timer = setTimeout(function() {func.call(context, args);timer = null;}, delay)}}} </script>

看看定時器版實現(xiàn)版本的效果：

三、時間戳和定時器的對比分析

對比時間戳和定時器兩種方式，效果上的區(qū)別主要在于：

事件戳方式會立即執(zhí)行，定時器會在事件觸發(fā)后延遲執(zhí)行，而且事件停止觸發(fā)后還會再延遲執(zhí)行一次。

具體選擇哪種方式取決于使用場景。underscore 把這兩類場景用 leading 和 trailing 進行了表示。

四、兼容兩種方式, underscore 源碼實現(xiàn)

underscore 的源碼中就同時實現(xiàn)了時間戳和定時器實現(xiàn)方式，在調(diào)用時可以自由選擇要不要在間隔時間開始時（leading）執(zhí)行，或是間隔時間結(jié)束后（trailing）執(zhí)行。

具體看偽代碼和示意圖：

<div class="container" id="container">正在滑動: 0</div><div class="height"></div><script>window.onload = function() {var bodyEl = document.getElementsByTagName("body")[0]}var count = 0;// 事件處理函數(shù)function eventHandler(e) {var containerEl = document.getElementById("container");containerEl.innerHTML = "正在滑動: " + count;count++;}var _throttle = function(func, wait, options) {var context, args, result;// 定時器變量默認為 null, 是為了如果想要觸發(fā)了一次后再延遲執(zhí)行一次。var timeout = null;// 上一次觸發(fā)事件回調(diào)的時間戳。 默認為 0 是為了方便第一次觸發(fā)默認立即執(zhí)行var previous = 0;// 如果沒有傳入 options 參數(shù)// 則將 options 參數(shù)置為空對象if (!options)options = {};var later = function() {// 如果 options.leading === false// 則每次觸發(fā)回調(diào)后將 previous 置為 0, 表示下次事件觸發(fā)會立即執(zhí)行事件處理函數(shù)// 否則置為當前時間戳previous = options.leading === false ? 0 : +new Date();// 剩余時間跑完，執(zhí)行事件，并把定時器變量置為空，如果不為空，那么剩余時間內(nèi)是不會執(zhí)行事件處理函數(shù)的，見 else if 那。timeout = null;result = func.apply(context, args);// 剩余時間結(jié)束，并執(zhí)行完事件后，清理閉包中自由變量的內(nèi)存垃圾，因為不再需要了。if (!timeout)context = args = null;};// 返回的事件回調(diào)函數(shù)return function() {// 記錄當前時間戳var now = +new Date();// 第一次執(zhí)行回調(diào)（此時 previous 為 0，之后 previous 值為上一次時間戳）// 并且如果程序設定第一個回調(diào)不是立即執(zhí)行的（options.leading === false）// 則將 previous 值（表示上次執(zhí)行的時間戳）設為 now 的時間戳（第一次觸發(fā)時）// 表示剛執(zhí)行過，這次就不用執(zhí)行了if (!previous && options.leading === false)previous = now;// 間隔時間 和 上一次到本次事件觸發(fā)回調(diào)的持續(xù)時間的時間差var remaining = wait - (now - previous);context = this;args = arguments;// 如果間隔時間還沒跑完，則不會執(zhí)行任何事件處理函數(shù)。// 如果超過間隔時間，就可以觸發(fā)方法（remaining <= 0）// remaining > wait，表示客戶端系統(tǒng)時間被調(diào)整過// 也會立即執(zhí)行 func 函數(shù)if (remaining <= 0 || remaining > wait) {if (timeout) {clearTimeout(timeout);// 解除引用，防止內(nèi)存泄露timeout = null;}// 重置前一次觸發(fā)的時間戳previous = now;// result 為事件處理函數(shù)(handler)的返回值// 采用 apply 傳遞類數(shù)組對象 argumentsresult = func.apply(context, args);// 引用置為空，防止內(nèi)存泄露if (!timeout)context = args = null;} else if (!timeout && options.trailing !== false) {// 如果 remaining > 0, 表示在間隔時間內(nèi)，又觸發(fā)了一次事件// 如果 trailing 為真，則會在間隔時間結(jié)束時執(zhí)行一次事件處理函數(shù)（handler）// 在從觸發(fā)到剩余時間跑完，會利用一個定時器執(zhí)行事件處理函數(shù)，并在定時器結(jié)束時把 定時器變量置為空// 如果剩余事件內(nèi)已經(jīng)存在一個定時器，則不會進入本 else if 分支, 表示剩余時間已經(jīng)有一個定時器在運行，該定時器會在剩余時間跑完后執(zhí)行。// 如果 trailing = false，即不需要在剩余時間跑完執(zhí)行事件處理函數(shù)。// 間隔 remaining milliseconds 后觸發(fā) later 方法timeout = setTimeout(later, remaining);}// 回調(diào)返回值return result;};};window.onmousemove = _throttle(eventHandler, 1000);</script>

下面是我畫的示意圖：

大致總結(jié)一下代碼對事件處理邏輯的影響：

如果 leading 為真，那么綠色意味著間隔時間的開始會立即執(zhí)行，第一次觸發(fā)也會立即執(zhí)行。

如果 trailing 為真，那么從藍紫色的豎細線后的剩余事件，會跑一個定時器，定時器在時間間隔結(jié)束時再執(zhí)行一次事件處理函數(shù)。

如果 leading 不為真，那么第一次事件觸發(fā)不會立即執(zhí)行。

如果 trailing 不為真，最后一次事件觸發(fā)后，不然再執(zhí)行一次事件處理函數(shù)。

節(jié)流和去抖的常見場景

輸入框打字輸入完后才開始異步請求數(shù)據(jù)校驗內(nèi)容：去抖

下拉滾動條判斷是否到底部，進行懶加載數(shù)據(jù)：去抖和節(jié)流都可以，判斷是否到底的方式不同

活動網(wǎng)站、游戲網(wǎng)站，按鈕被瘋狂點擊：節(jié)流

六、總結(jié)

去抖和節(jié)流函數(shù)都是為了降低高頻率事件觸發(fā)的事件處理頻率，從而優(yōu)化網(wǎng)頁中大量重繪重排帶來的性能問題。

其區(qū)別在于去抖會在高頻率事件觸發(fā)時，只執(zhí)行一次，節(jié)流會在滿足間隔時間后執(zhí)行一次。去抖的 immediate，節(jié)流中的 leading, trailing 都是為了盡可能滿足這類工具函數(shù)的不同使用場景。

總結(jié)

以上是生活随笔為你收集整理的JS专题之节流函数的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。