JavaScript 中的調節器：提升應用程序的性能

時間 2020-01-10

標籤 javascript 調節器提升應用程序性能欄目 JavaScript 简体版

原文原文鏈接

做者：Trey Huffine
翻譯：瘋狂的技術宅javascript

原文：https://levelup.gitconnected....前端

未經容許嚴禁轉載java

調節器是瀏覽器中經過限制代碼要處理的事件數量來提升性能的經常使用技術。當你想以受控的速率執行回調時，應該使用調節器，它容許你在每一個固定的時間間隔內重複處理過渡狀態。git

我將以一個真實世界的類比開始，而後在 Web 上下文中描述調節器，最後提供有關如何實現節流的註釋代碼示例。在文章的結尾，有一個帶有調節器示例的 Codepen，你能夠與之交互以查看其工做原理。若是隻關心代碼，請跳至「JavaScript 中的調節器實現」部分。程序員

調節器是「去抖動」的表親，它們均可以提升 Web 應用的性能。可是它們在不一樣的狀況下使用。當你只關心最終狀態時，會使用去抖功能。例如等待用戶中止鍵入以獲取預先輸入的搜索結果。當你想要以受控的速率處理全部中間狀態時，最好使用調節器。例如，當用戶調整窗口大小並在頁面內容改變時從新排列頁面內容時跟蹤屏幕寬度，而不是等到用戶完成操做時再跟蹤。面試

真實世界中調節器的例子

一個比喻是咱們的飲食方式。咱們想節制飲食，以便每 6 小時吃一頓飯。咱們早上 7 點起牀吃早餐，而後節流，直到下午 1 點吃午飯，最後在晚上 7 點吃晚餐。每次吃完飯後，咱們就會阻止本身進食 6 個小時，以確保成天都能以合理的增量得到食物。segmentfault

這種類比能夠擴展到生活中以設定的增量去執行動做的任何情形。例如，咱們但願每三個月更換一次汽車中的機油。咱們不會提早這樣作，由於那是在浪費金錢，咱們也不會拖延，由於這會損壞汽車引擎。咱們會檢查擋風玻璃上的貼紙，看是否通過了足夠的時間，而後咱們去找機械師。所以，咱們會每 3 個月就進行一次換油，這樣能夠最有效地處理換油事件。瀏覽器

Web 開發中的節流

爲了理解 Web 開發上下文中的限制，假設你有一個滾動事件處理程序，當用戶在頁面上向下移動時，你想在其中向用戶顯示新內容。若是在每次用戶滾動單個像素時都執行回調，假如快速滾動的話，咱們將會很快就被事件阻塞，由於它將快速連續發送數百或數千個事件。相反，咱們對其進行限制，僅每 100 毫秒檢查一次滾動，這樣每秒僅得到10個回調。用戶仍然能夠當即感受到響應，可是計算效率更高。服務器

調節器用於建立均勻間隔的函數調用。想象一下，若是你在事件處理程序回調函數中執行大量計算或 API 請求。經過限制這些回調，能夠防止應用凍結或對服務器發出沒必要要地請求。微信

JavaScript 中的調節器的實現

讓咱們當即進入調節器代碼。我會在下面進行描述，而後提供該功能的註釋版本。

const throttle = (callback, delay) => {
  let throttleTimeout = null;
  let storedEvent = null;

  const throttledEventHandler = event => {
    storedEvent = event;

    const shouldHandleEvent = !throttleTimeout;

    if (shouldHandleEvent) {
      callback(storedEvent);

      storedEvent = null;

      throttleTimeout = setTimeout(() => {
        throttleTimeout = null;

        if (storedEvent) {
          throttledEventHandler(storedEvent);
        }
      }, delay);
    }
  };

  return throttledEventHandler;
};

這個調節器的實現是最簡單易懂的。它僅用於教學目的，並不是是效率最高或代碼行數最少的。

調節器是一個高階函數，這是一個返回另外一函數的函數（爲清楚起見，此處命名爲 throttledEventHandler）。這樣作是爲了圍繞 callback、delay、throttleTimeout 和 storedEvent 參數造成一個閉包。這保留了在執行 throttledEventHandler 時要讀取的每一個變量的值。如下是每一個變量的定義：

callback：你想要以給定速率執行的節流函數。
delay：你但願節流函數在屢次執行 callback 之間等待的時間。
throttleTimeout: The value used to indicate a running throttle created by our setTimeout.
throttleTimeout：該值用於指示由 setTimeout 建立的調節器。
storedEvent：你想經過節流 callback 處理的事件。該值將不斷更新，直到截流結束。

咱們能夠在如下代碼中使用調節器：

var returnedFunction = throttle(function() {
  // Do all the taxing stuff and API requests
}, 500);

window.addEventListener('scroll', returnedFunction);

因爲調節器返回一個函數，所以第一個例子中的 throttledEventHandler 和第二個例子中的 returnedFunction 函數其實是相同的函數。每次用戶滾動鼠標時，它將執行 throttledEventHandler /returnedFunction。

下面逐步說明在截流函數時會發生什麼。首先，咱們圍繞變量建立一個閉包，以便每次執行時它們均可用於ThrottledEventHandler。 ThrottledEventHandler 接收到 1 個做爲事件的參數。它將事件存儲在 storedEvent 變量中。

而後檢查運行是否超時（即激活調節器）。若是調節器生效，那麼 throttledEventHandler 已經完成了該執行並等待執行回調。若是調節器爲非活動狀態，則能夠用回調函數當即處理該事件。而後調用 setTimeout 並存儲超時值，該值代表調節器正在生效。

當 timeout 處於活動狀態時，將始終存儲最新事件。這時則會跳過回調的執行，這可使咱們免於執行 CPU 密集型任務或調用咱們的 API。

當 setTimeout 結束時，將 throttleTimeout 置爲空，這代表該函數再也不受到限制而且能夠處理事件。若是有一個 storedEvent，咱們想當即處理它，這是則會遞歸地調用 throttledEventHandler。 setTimeout 內部的遞歸調用使咱們可以以恆定的速率處理事件。只要有新事件繼續發生，它就會在指望的延遲後重復執行相同的處理過程。

該函數的註釋版本：

// 傳遞咱們要限制的回調以及限制事件之間的延遲
const throttle = (callback, delay) => {
  // 在這些變量周圍建立一個閉包。
  // 它們將在調節器處理的全部事件之間共享。
  let throttleTimeout = null;
  let storedEvent = null;

  // 當調節器處於活動狀態時，此函數將處理事件和調節器回調。
  const throttledEventHandler = event => {
    // 每次迭代都更新存儲的事件
    storedEvent = event;

    // 若是調節器還沒有激活，咱們將使用事件執行回調
    const shouldHandleEvent = !throttleTimeout;

    // 若是沒有活動的調節器，將執行回調並建立一個新的調節器。
    if (shouldHandleEvent) {
      // 處理咱們的事件
      callback(storedEvent);

      // 因爲咱們使用了已存儲的事件，所以將其清空。
      storedEvent = null;

      // 經過設置超時來建立新的限制，以防止在延遲期間處理事件。
      // 超時結束後，若是有存儲的事件，則執調節器。
      throttleTimeout = setTimeout(() => {
        // 因爲調節器時間已到期，所以咱們當即使調節器超時無效。
        throttleTimeout = null;

        // 若是咱們有一個存儲的事件，則遞歸調用此函數。
        // 遞歸使咱們可以在事件發生時連續運行。
        // 若是事件中止了，咱們的調節器將結束。 若是有新事件發生，它將當即執行。
        if (storedEvent) {
          // 因爲超時結束：
          // 1. 因爲節流時間如今爲 null，所以本遞歸調用將當即執行 `callback`
          // 2. 它將從新啓動調節器 timer，使咱們能夠重複調節器過程
          throttledEventHandler(storedEvent);
        }
      }, delay);
    }
  };

  // 返回受限制的事件處理做爲閉包
  return throttledEventHandler;
};