【核心基礎知識】3個場景的DOM事件處理

一、防抖

在一段時間內能夠多次觸發並且在最後一次觸發纔是能夠得到完整結果的事件可以使用防抖來防止事件處理函數的多次執行以提升體驗和性能。

比如：有一個搜索輸入框，爲了提升用戶體驗，希望在用戶輸入後可以立即展現搜索結果，而不是每次輸入完後還要點擊搜索按鈕。一種實現方式應該很容易想到，那就是綁定 input 元素的input事件，然後在監聽函數中發送 AJAX 請求。

這樣的實現很容易造成性能問題。比如一個詞需要輸入四次那麼就會發送四次ajax請求。其實只有最後一次纔是用戶想要輸入的完整內容，前面三次的查詢都會被浪費掉，浪費了網絡帶寬和服務器資源。這個時候就可以考慮使用防抖了。

簡單的防抖可以使用settimeout實現。在實現防抖時如何實現：1、參數和返回值如何傳遞？，2、防抖化之後的函數是否可以立即執行？，3、防抖化的函數是否可以手動取消？。這是更復雜的防抖需求了，爲了實現這些需求，寫出瞭如下代碼。

首先將原函數作爲參數傳入 debounce() 函數中，同時指定延遲等待時間，返回一個新的函數，這個函數包含 cancel 屬性，用來取消原函數執行。flush 屬性用來立即調用原函數，同時將原函數的執行結果以 Promise 的形式返回。

const debounce = (func, wait = 0) => {
      let timeout = null
      let lastArgs = null

      function debounced(...args) {
         lastArgs = args

         if (timeout) {
            clearTimeout(timeout)
            timeout = null
         }