防止重複觸發的方法--心得分享
發生情境 這次做了個搜尋鍵，點下後會執行一次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 會比較好，可以對每個狀態去做主動處理，再按下按鈕的時候 就先暫停按鈕...