前端開發之JavaScript篇——防抖在DOM操作中的應用
平時瀏覽網頁時，往往避免不了使用鼠標點擊或鍵盤敲字，這些動作事件在網頁開發中，可以稱DOM事件，DOM事件可以處理頁面與用戶進行交互，這期間也離不開對元素事件的監聽。那么，這篇文章主要介紹在元素事件監聽期間的防抖與節流操作。
什么是防抖
防抖，指在觸發事件后，再過 n 秒后再執行回調函數；如果在這 n 秒內之前觸發的事件再次被觸發，則重新計時。這可以使用在一些點擊請求事件、失焦事件、聚焦事件等上面，避免因為用戶的操作而觸發相同事件請求。
為何需要防抖
這里可以舉登錄或注冊時驗證事件的監聽input輸入框的例子，在我們輸入用戶名時，為了提高用戶體驗，input輸入框往往會有監聽事件，即每輸入一個字母會字都進行驗證判斷，相關代碼如下：
//html相關代碼
從結果可以看到，我們在輸入框每輸入一個字母時，在console輸出事件就觸發一次，如果是注冊時要驗證輸入的用戶名是否已存在，則需要向服務器發送請求驗證，那么，每輸入一個字母，則發送一次請求，一個用戶名10個字母，則發送10次請求，浪費網路帶框和服務器資源。
所以，對于這類連續觸發事件，我們需要做“防抖”處理。
如何防抖
在設置防抖時，我們可以為連續觸發事件設置在一個合理的時間內執行，避免在這時間內，重復執行相同事件操作。
設置時間則可以用定時器setTimeout()，相關代碼如下：
const?input=document.querySelector("input") input.addEventListener("input",e=>{ ????let?T?=setTimeout(()=>{ ????????console.log(e.target.value) ????},2000) })
從結果可以看到，在設置定時器后，console輸出的用戶名比較完整了，但還是不能解決減少事件執行次數，在重新觸發事件后，先前的事件還是會執行，為此，需要在重新觸發事件后，清理先前的事件，相關代碼如下：
const?input=document.querySelector("input") let?T=null input.addEventListener("input",e=>{ ????if(T){ ????????clearTimeout(T) T=null ????} ????T?=setTimeout(()=>{ ???? ????console.log(e.target.value) ???? ????},2000) })
從結果可以看到，這次console輸出這有一次，相應地，我們可以把console輸出事件換成其他點擊點擊事件等，這樣，在注冊驗證時，就可以較少向服務器發送請求的次數了。
好了，這篇防抖就介紹到這，喜歡的可以哦！
軟件開發 JavaScript
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
