關(guān)鍵要點(diǎn)

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

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

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

下面的示例說(shuō)明了這個(gè)問(wèn)題：

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

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

規(guī)範(fàn)事件

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

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

去抖

去抖解決的是不同的問(wèn)題，例如帶有 Ajax 的按鍵。當(dāng)您在表單中鍵入內(nèi)容時(shí)，為什麼要為每個(gè)按鍵發(fā)送請(qǐng)求？更優(yōu)雅的解決方案是將一系列按鍵組合成一個(gè)事件，該事件將觸發(fā) Ajax 請(qǐng)求。這符合鍵入的自然流程並節(jié)省了服務(wù)器資源。對(duì)於按鍵，事件之間的間隔並不重要，因?yàn)橛脩舨粫?huì)以恆定的速率鍵入。

節(jié)流

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

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

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

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

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

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

使用庫(kù)

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

lodash

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

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

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

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

API 提供了前沿和後沿選項(xiàng)，如下所示：

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

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

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

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

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

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

結(jié)論

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

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

關(guān)於節(jié)流滾動(dòng)事件的常見(jiàn)問(wèn)題解答 (FAQ)

• 在 JavaScript 中節(jié)流滾動(dòng)事件的目的是什麼？

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

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

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

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

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

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

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

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

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

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

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

• 節(jié)流的潛在缺點(diǎn)是什麼？

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

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

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

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

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

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

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

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