永遠不要忘記再次反跳和油門。可視化它們 - 包括 Codepen

這不僅僅是另一篇試圖解釋去抖動或限制如何在程式碼層級工作的文章，而是一個記住和視覺化概念的插圖，以便您可以在工作中實際應用它們。

就我個人而言，我經常發現自己忘記了去抖動和節流的概念，所以當有人要求我解釋它們時 - 或者如果在採訪中出現問題 - 我只是眨眼？為了避免這種情況，我製作了一個簡單的頁面來幫助刷新我的記憶。如果您不想感覺自己像個冒名頂替者，請跟隨？ .

在下面的程式碼中，我將去抖和油門的延遲設定為 2 秒。嘗試點擊隨機食物並暫停。

指數

• 餐廳類比
• 解釋
  • 為什麼要反跳或節流？
  • JS 事件處理程序
  • 怎麼了？
  • 反跳
  • 油門

頁面連結

ashiqsultan.github.io

GitHub 連結

餐廳類比

想像一下您在一家餐廳想要點一些食物，因此您從桌子上選擇菜單，然後開始閱讀所有項目。 （在我分享的網頁中，點擊不同的食物就等於閱讀選單項目）

這裡的類比

• ？閱讀食物項目 = ?點擊按鈕
• ？ ‍？服務生去廚房=？ API呼叫

想像餐廳裡有三種不同類型的服務生可以為您服務：

1. ?‍♂️ 普通服務生

   • 每次提及某項時都​​記下
   • 跑到廚房拿每件物品
   • 就像 JS 立即處理每個事件

2. ？反跳服務生

   • 當你開始閱讀菜單時，他會等你至少停頓2秒才點菜。
   • 就像在進行 API 呼叫之前等待使用者完成輸入

3. ?‍?被扼殺的服務生

   • 每2秒只接受一次訂單
   • 如果您在 2 秒內提及多個項目，它們都會按相同的順序排列
   • 例如將 API 呼叫限制為每 X 秒一次，無論使用者活動如何

註：主要差異是：

• 去抖動：等待活動（按鈕點擊）停止指定​​時間觸發
• 限制：定期觸發，無論活動何時停止
• 另外 2 秒只是我用來當範例的時間，它可以是任何時間段

解釋

為什麼要進行反跳或節流？

在了解去抖動或節流之前，我們首先需要知道為什麼要使用它們。要知道這一點，讓我們了解 JS 事件處理程序的行為

JS 中的事件處理程序

在 JS 中，事件處理程序只是在發生特定事件（如按一下、鍵入或捲動）時執行的函數。 預設情況下，這些處理程序會在每次事件發生時觸發 - 每次按鍵、每次點擊或滾動移動。

// Basic event handler
button.addEventListener('click', function() {
    console.log('Button clicked!');
});

// Basic keystroke handler
input.addEventListener('keyup', function() {
    console.log('Key pressed!');
});

怎麼了？

例如，您有一個可以進行 API 呼叫的按鈕

function makeApiCall() {
  console.log("API call made");
}

button.addEventListener('click', () => {
  makeApiCall();
});

上面的函數將在每次點擊按鈕時執行 makeApiCall() (即) 如果你在 1 秒內按了 10 次，猜猜你在 1 秒內進行了 10 次 api 呼叫。 是預設行為。

但是每次為事件觸發 API 呼叫可能效率很低，而且大多數時候這不是您想要的。這就是節流和去抖動發揮作用的地方。

如果你想從本文中刪除一個定義，可能就是這個。 節流和去抖動是控制事件監聽器回應率的兩種最常見的方法。

去抖

我不會解釋去抖動的程式碼，因為它只能從 lodash 匯入，而是我們將看看你可以在哪裡實際使用它。

當您希望僅在使用者停止輸入一段時間或停止點擊一段時間後才進行 api 呼叫時，請使用 Debouncing。

在我們的範例中，如果使用者連續單擊按鈕甚至連續 5 分鐘，則 api 呼叫將只進行一次。

這裡發生了兩件事：

• 使用者需要停止點擊。
• 停止點擊意味著至少2秒內不應點擊按鈕。

風門

油門就像一個間隔。當您不想等到使用者停止而是在每個間隔（例如 2 秒）進行 api 呼叫時，請使用此方法

例如，如果使用者連續輸入 1 分鐘而沒有暫停，那麼您將每 2 秒呼叫一次 API。

結論

正如文章中提到的，這並不是為了解釋這些函數是如何運作的，而是為了可視化並理解其使用原因。我絕對會建議您在程式碼層級了解它們是如何運作的，但個人仍然會使用 lodash 庫提供的去抖和節流，而不是重新發明輪子。

如果你喜歡這篇文章請按讚，這真的會激勵我寫更多。謝謝 ？ 。

以上是永遠不要忘記再次反跳和油門。可視化它們 - 包括 Codepen的詳細內容。更多資訊請關注PHP中文網其他相關文章！