快速提示：如何油門滾動事件

關鍵要點

• 監聽滾動事件可能導致性能下降，因為瀏覽器會在每次用戶滾動時執行回調函數；節流和去抖是管理此問題的兩種常用函數。節流保證在給定的時間間隔內事件的恆定流動，而去抖將一系列事件組合成單個事件。
• 在 JavaScript 中實現事件節流可能很複雜，建議使用像 lodash 這樣的第三方實現，它是事件節流的標準。 Lodash 的節流函數簡化了滾動事件節流，並提供選項來確定回調函數是否在事件的前沿和/或後沿執行。
• 選擇節流和去抖的關鍵在於查看要解決問題的性質。節流適用於在給定時間跨度內發生的事件，例如滾動，而去抖適用於按鍵等事件，其中事件之間的間隔並不重要。

本文由 Vildan Softic 和 Julian Motz 共同評審。感謝所有 SitePoint 的同行評審員，使 SitePoint 的內容達到最佳狀態!

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

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

查看 CodePen 上的示例：未節流的滾動事件

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

規範事件

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

節流保證在給定的時間間隔內事件的恆定流動，而去抖將一系列事件組合成單個事件。一種思考方式是節流是基於時間的，而去抖是基於事件的。節流保證執行，而去抖在分組發生後則不保證執行。如果您想了解具體信息，請查看這篇關於去抖與節流的深入討論。

去抖

去抖解決的是不同的問題，例如帶有 Ajax 的按鍵。當您在表單中鍵入內容時，為什麼要為每個按鍵發送請求？更優雅的解決方案是將一系列按鍵組合成一個事件，該事件將觸發 Ajax 請求。這符合鍵入的自然流程並節省了服務器資源。對於按鍵，事件之間的間隔並不重要，因為用戶不會以恆定的速率鍵入。

節流

由於去抖沒有保證，因此另一種方法是對滾動事件進行節流。滾動發生在給定的時間跨度內，因此進行節流是合適的。一旦用戶開始滾動，我們希望保證及時執行。

此技術有助於檢查我們是否位於頁面的特定部分。鑑於頁面的大小，滾動瀏覽內容需要很多秒。這使得節流能夠僅在任何給定的間隔內觸發一次事件。事件節流將使滾動體驗更流暢並保證執行。

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

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

此實現設置一個時間變量，該變量跟踪函數第一次調用時的時刻。每次調用返回的函數時，它都會檢查等待間隔是否已過去，如果已過去，則它會觸發回調並重置時間。

查看 CodePen 上的示例：原生 JS 節流實現

使用庫

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

lodash

lodash 是 JavaScript 中事件節流的事實上的標準。此庫是開源的，因此您可以隨意瀏覽代碼。好處是該庫是模塊化的，因此可以從中獲取所需的內容。

使用 lodash 的節流函數，滾動事件節流變得很簡單：

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

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

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

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

這些選項確定回調函數是否在事件的前沿和/或後沿執行。

這裡的一個問題是，如果您將前沿和後沿都設置為 false，則回調函數不會觸發。將前沿設置為 true 將立即開始回調執行，然後進行節流。當您將前沿和後沿都設置為 true 時，這將保證每個間隔的執行。

查看 CodePen 上的演示：節流滾動事件

從查看源代碼中，我發現有趣的是 throttle() 只是 debounce() 的包裝器。節流只是傳遞一組不同的參數來更改所需的行為。節流設置一個 maxWait，一旦等待這麼長時間，它就會保證執行。其餘的實現保持不變。

我希望您在下次事件節流冒險中發現 lodash 對您有益！

結論

節流與去抖的關鍵在於查看要解決問題的性質。這兩種技術適用於不同的用例。我建議從用戶的角度來看待問題以找到答案。

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

關於節流滾動事件的常見問題解答 (FAQ)

• 在 JavaScript 中節流滾動事件的目的是什麼？

在 JavaScript 中節流滾動事件是一種用於優化網站或 Web 應用程序性能的技術。當用戶在網頁上滾動時，瀏覽器會為每個像素的移動生成一個滾動事件。這可能導致每秒生成數百甚至數千個事件，這會嚴重降低網頁的性能。通過節流這些事件，我們可以限制處理的事件數量，從而提高網頁的性能和響應速度。

• JavaScript 中的節流是如何工作的？

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

• 節流和去抖的區別是什麼？

節流和去抖都是用於限制函數可以隨時間執行次數的技術。兩者之間的主要區別在於它們如何處理延遲。節流確保函數每 X 毫秒不會調用超過一次，而去抖確保函數直到自上次調用以來經過 X 毫秒後才會調用。換句話說，節流以規則的間隔執行函數，而去抖在一段時間不活動後執行函數。

• 我如何在 JavaScript 中實現節流？

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

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

是的，節流可以與 JavaScript 中的任何類型的事件一起使用，而不僅僅是滾動事件。它對於經常觸發或需要大量處理的事件特別有用，例如鼠標移動事件、調整大小事件和按鍵事件。

• 是否有任何庫或框架提供對節流的內置支持？

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

• 節流的潛在缺點是什麼？

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

• 我如何測試節流的有效性？

您可以通過在實現節流之前和之後測量網頁的性能來測試節流的有效性。這可以使用瀏覽器開發者工具來完成，該工具提供有關網頁性能的詳細信息，包括處理事件所需的時間。

• 節流可以與其他性能優化技術結合使用嗎？

是的，節流可以與其他性能優化技術結合使用，例如去抖和 requestAnimationFrame。通過結合這些技術，您可以進一步提高網頁的性能和響應速度。

• 節流是否有替代方案？

是的，節流有幾種替代方案，包括去抖和 requestAnimationFrame。去抖類似於節流，但它不是限制函數可以隨時間調用的次數，而是確保函數直到自上次調用以來經過一定時間後才會調用。 requestAnimationFrame 是一種告訴瀏覽器執行動畫並請求瀏覽器在下次重繪之前調用指定函數來更新動畫的方法。

以上是快速提示：如何油門滾動事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！