防止重複觸發的方法--心得分享

發生情境

這次做了個搜尋鍵，點下後會執行一次API，進行搜尋。

可如果還沒搜尋完，就不斷的按下搜尋鍵，API就會不斷地執行

解決方法

1.  使用promise

使用promise，promise可以取得到pending 狀態。

而 await 則是一開始就進入到了等待的狀態。

透過 promise 在等待的期間，可以先將 按鈕的disabled = true，停止按鈕可點擊。
無論成功或失敗再將按鈕調回disabled = false

function FindSearch() {
  document.getElementById("searchbtn").disabled = true; //停止按鈕
  let chkEmpty = Object.values(searchWord).every(value => value === "");
  if (!chkEmpty) {
    getPageList(searchWord)
      .then(pageList => {
        // 處理獲取到的頁面列表
        console.log(pageList);
      })
      .catch(error => {
        // 處理錯誤
        console.error(error);
      })
      .finally(() => {
        // 無論成功或失敗都要執行的操作
        document.getElementById("searchbtn").disabled = false; //恢復按鈕
      });
  }
}

2.  使用debounce

debounce 防抖，狂點按鈕的時候，並不會連續執行，會超過一段時間後再觸發。

當搜尋框內打入文字超過一定的時間，此時才會去執行觸發 API，不會每打一個就執行 。

js

------------------------------------

這兩者都能做到防止連續觸發。

在使用上如果真的要做到等待執行完成，才可以執行下次搜尋 使用promise 會比較好，可以對每個狀態去做主動處理，再按下按鈕的時候 就先暫停按鈕可點擊的動作。

debounce 則可以用在 監聽需要不斷變化的內容API，期間又不想太過頻繁觸發，則可以閒置一段時間後再執行，此外內容不斷變化時並不會去執行API。 

參考資料

什麼是debunce