關(guān)鍵要點

• 監(jiān)聽滾動事件可能導(dǎo)致性能下降，因為瀏覽器會在每次用戶滾動時執(zhí)行回調(diào)函數(shù)；節(jié)流和去抖是管理此問題的兩種常用函數(shù)。節(jié)流保證在給定的時間間隔內(nèi)事件的恒定流動，而去抖將一系列事件組合成單個事件。
• 在 JavaScript 中實現(xiàn)事件節(jié)流可能很復(fù)雜，建議使用像 lodash 這樣的第三方實現(xiàn)，它是事件節(jié)流的標(biāo)準(zhǔn)。Lodash 的節(jié)流函數(shù)簡化了滾動事件節(jié)流，并提供選項來確定回調(diào)函數(shù)是否在事件的前沿和/或后沿執(zhí)行。
• 選擇節(jié)流和去抖的關(guān)鍵在于查看要解決問題的性質(zhì)。節(jié)流適用于在給定時間跨度內(nèi)發(fā)生的事件，例如滾動，而去抖適用于按鍵等事件，其中事件之間的間隔并不重要。

本文由 Vildan Softic 和 Julian Motz 共同評審。感謝所有 SitePoint 的同行評審員，使 SitePoint 的內(nèi)容達(dá)到最佳狀態(tài)!

監(jiān)聽滾動事件的危險之一是性能下降。瀏覽器會在用戶每次滾動時執(zhí)行回調(diào)函數(shù)，這每秒可能會有很多事件。如果回調(diào)函數(shù)執(zhí)行大量重繪操作，這對最終用戶來說意味著壞消息。重繪代價高昂，尤其是在重繪視圖的大部分內(nèi)容時，例如發(fā)生滾動事件時的情況。

下面的示例說明了這個問題：

查看 CodePen 上的示例：未節(jié)流的滾動事件

除了性能下降和容易引起癲癇發(fā)作之外。此示例說明了當(dāng)計算機(jī)完全按照您的指示執(zhí)行操作時會發(fā)生什么。背景顏色之間沒有平滑的過渡，屏幕只是閃爍。任何不幸的程序員都可能覺得在這個世界上沒有希望了。難道沒有更好的方法嗎？

規(guī)范事件

一種解決方案是推遲事件并一次管理多個事件。有兩個常用的函數(shù)可以幫助我們做到這一點：節(jié)流和去抖。

節(jié)流保證在給定的時間間隔內(nèi)事件的恒定流動，而去抖將一系列事件組合成單個事件。一種思考方式是節(jié)流是基于時間的，而去抖是基于事件的。節(jié)流保證執(zhí)行，而去抖在分組發(fā)生后則不保證執(zhí)行。如果您想了解具體信息，請查看這篇關(guān)于去抖與節(jié)流的深入討論。

去抖

去抖解決的是不同的問題，例如帶有 Ajax 的按鍵。當(dāng)您在表單中鍵入內(nèi)容時，為什么要為每個按鍵發(fā)送請求？更優(yōu)雅的解決方案是將一系列按鍵組合成一個事件，該事件將觸發(fā) Ajax 請求。這符合鍵入的自然流程并節(jié)省了服務(wù)器資源。對于按鍵，事件之間的間隔并不重要，因為用戶不會以恒定的速率鍵入。

節(jié)流

由于去抖沒有保證，因此另一種方法是對滾動事件進(jìn)行節(jié)流。滾動發(fā)生在給定的時間跨度內(nèi)，因此進(jìn)行節(jié)流是合適的。一旦用戶開始滾動，我們希望保證及時執(zhí)行。

此技術(shù)有助于檢查我們是否位于頁面的特定部分。鑒于頁面的大小，滾動瀏覽內(nèi)容需要很多秒。這使得節(jié)流能夠僅在任何給定的間隔內(nèi)觸發(fā)一次事件。事件節(jié)流將使?jié)L動體驗更流暢并保證執(zhí)行。

下面是使用原生 JavaScript 編寫的簡陋的事件節(jié)流器：

function throttle(fn, wait) {
  var time = Date.now();
  return function() {
    if ((time + wait - Date.now()) < 0) {
      fn();
      time = Date.now();
    }
  }
}

此實現(xiàn)設(shè)置一個時間變量，該變量跟蹤函數(shù)第一次調(diào)用時的時刻。每次調(diào)用返回的函數(shù)時，它都會檢查等待間隔是否已過去，如果已過去，則它會觸發(fā)回調(diào)并重置時間。

查看 CodePen 上的示例：原生 JS 節(jié)流實現(xiàn)

使用庫

事件節(jié)流有很多危險，不建議自己編寫。與其編寫自己的實現(xiàn)，我建議使用第三方實現(xiàn)。

lodash

lodash 是 JavaScript 中事件節(jié)流的事實上的標(biāo)準(zhǔn)。此庫是開源的，因此您可以隨意瀏覽代碼。好處是該庫是模塊化的，因此可以從中獲取所需的內(nèi)容。

使用 lodash 的節(jié)流函數(shù)，滾動事件節(jié)流變得很簡單：

window.addEventListener('scroll', _.throttle(callback, 1000));

這將傳入的滾動事件洪流限制為每 1000 毫秒（一秒鐘）一次。

API 提供了前沿和后沿選項，如下所示：

_.throttle(callback, 1, { trailing: true, leading: true });

這些選項確定回調(diào)函數(shù)是否在事件的前沿和/或后沿執(zhí)行。

這里的一個問題是，如果您將前沿和后沿都設(shè)置為 false，則回調(diào)函數(shù)不會觸發(fā)。將前沿設(shè)置為 true 將立即開始回調(diào)執(zhí)行，然后進(jìn)行節(jié)流。當(dāng)您將前沿和后沿都設(shè)置為 true 時，這將保證每個間隔的執(zhí)行。

查看 CodePen 上的演示：節(jié)流滾動事件

從查看源代碼中，我發(fā)現(xiàn)有趣的是 throttle() 只是 debounce() 的包裝器。節(jié)流只是傳遞一組不同的參數(shù)來更改所需的行為。節(jié)流設(shè)置一個 maxWait，一旦等待這么長時間，它就會保證執(zhí)行。其余的實現(xiàn)保持不變。

我希望您在下次事件節(jié)流冒險中發(fā)現(xiàn) lodash 對您有益！

結(jié)論

節(jié)流與去抖的關(guān)鍵在于查看要解決問題的性質(zhì)。這兩種技術(shù)適用于不同的用例。我建議從用戶的角度來看待問題以找到答案。

使用 lodash 的好處在于它在一個簡單的 API 中抽象了大量復(fù)雜性。好消息是您可以在項目中使用 _.throttle()，而無需添加整個庫。有 lodash-cli，這是一個工具，可以讓您只創(chuàng)建包含所需函數(shù)的自定義構(gòu)建。事件節(jié)流只是整個庫的一小部分。

關(guān)于節(jié)流滾動事件的常見問題解答 (FAQ)

• 在 JavaScript 中節(jié)流滾動事件的目的是什么？

在 JavaScript 中節(jié)流滾動事件是一種用于優(yōu)化網(wǎng)站或 Web 應(yīng)用程序性能的技術(shù)。當(dāng)用戶在網(wǎng)頁上滾動時，瀏覽器會為每個像素的移動生成一個滾動事件。這可能導(dǎo)致每秒生成數(shù)百甚至數(shù)千個事件，這會嚴(yán)重降低網(wǎng)頁的性能。通過節(jié)流這些事件，我們可以限制處理的事件數(shù)量，從而提高網(wǎng)頁的性能和響應(yīng)速度。

• JavaScript 中的節(jié)流是如何工作的？

JavaScript 中的節(jié)流通過在事件執(zhí)行之間設(shè)置延遲來工作。當(dāng)觸發(fā)事件時，計時器啟動。如果在計時器結(jié)束之前觸發(fā)另一個事件，則會忽略該事件。這確保了在處理另一個事件之前必須經(jīng)過一定的時間量。此技術(shù)對于經(jīng)常觸發(fā)的事件（例如滾動事件）特別有用。

• 節(jié)流和去抖的區(qū)別是什么？

節(jié)流和去抖都是用于限制函數(shù)可以隨時間執(zhí)行次數(shù)的技術(shù)。兩者之間的主要區(qū)別在于它們?nèi)绾翁幚硌舆t。節(jié)流確保函數(shù)每 X 毫秒不會調(diào)用超過一次，而去抖確保函數(shù)直到自上次調(diào)用以來經(jīng)過 X 毫秒后才會調(diào)用。換句話說，節(jié)流以規(guī)則的間隔執(zhí)行函數(shù)，而去抖在一段時間不活動后執(zhí)行函數(shù)。

• 我如何在 JavaScript 中實現(xiàn)節(jié)流？

可以使用 setTimeout 函數(shù)在 JavaScript 中實現(xiàn)節(jié)流。此函數(shù)允許您將函數(shù)的執(zhí)行延遲指定的毫秒數(shù)。通過將 setTimeout 與事件偵聽器結(jié)合使用，您可以確保事件處理程序函數(shù)每 X 毫秒不會調(diào)用超過一次。

• 除了滾動事件之外，我還可以將節(jié)流與其他事件一起使用嗎？

是的，節(jié)流可以與 JavaScript 中的任何類型的事件一起使用，而不僅僅是滾動事件。它對于經(jīng)常觸發(fā)或需要大量處理的事件特別有用，例如鼠標(biāo)移動事件、調(diào)整大小事件和按鍵事件。

• 是否有任何庫或框架提供對節(jié)流的內(nèi)置支持？

是的，有幾個庫和框架提供對節(jié)流的內(nèi)置支持。例如，流行的 JavaScript 實用程序庫 Lodash 提供了一個節(jié)流函數(shù)，使實現(xiàn)節(jié)流變得容易。同樣，流行的 JavaScript 庫 jQuery 也在其 API 中提供了一個節(jié)流函數(shù)。

• 節(jié)流的潛在缺點是什么？

雖然節(jié)流可以提高網(wǎng)頁的性能，但如果使用不當(dāng)，它也可能導(dǎo)致用戶體驗響應(yīng)速度較慢。例如，如果延遲設(shè)置得太高，用戶可能會注意到他們的操作與網(wǎng)頁的響應(yīng)之間存在滯后。因此，在使用節(jié)流時，在性能和響應(yīng)速度之間找到平衡非常重要。

• 我如何測試節(jié)流的有效性？

您可以通過在實現(xiàn)節(jié)流之前和之后測量網(wǎng)頁的性能來測試節(jié)流的有效性。這可以使用瀏覽器開發(fā)者工具來完成，該工具提供有關(guān)網(wǎng)頁性能的詳細(xì)信息，包括處理事件所需的時間。

• 節(jié)流可以與其他性能優(yōu)化技術(shù)結(jié)合使用嗎？

是的，節(jié)流可以與其他性能優(yōu)化技術(shù)結(jié)合使用，例如去抖和 requestAnimationFrame。通過結(jié)合這些技術(shù)，您可以進(jìn)一步提高網(wǎng)頁的性能和響應(yīng)速度。

• 節(jié)流是否有替代方案？

是的，節(jié)流有幾種替代方案，包括去抖和 requestAnimationFrame。去抖類似于節(jié)流，但它不是限制函數(shù)可以隨時間調(diào)用的次數(shù)，而是確保函數(shù)直到自上次調(diào)用以來經(jīng)過一定時間后才會調(diào)用。requestAnimationFrame 是一種告訴瀏覽器執(zhí)行動畫并請求瀏覽器在下次重繪之前調(diào)用指定函數(shù)來更新動畫的方法。

以上是快速提示：如何油門滾動事件的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！