前端性能優化之函數防抖

我們在做輸入框實時查詢時，一般會這樣寫：

<input type="text" id="searchInput">      

<script>
  let searchInput = document.querySelector('#searchInput')
  searchInput.oninput = function () {
    // 擷取搜尋值後，執行搜尋推薦請求
    console.log(this.value)
  }
</script>      

如果使用者是想搜尋lyh，在輸入時相當于執行了3次搜尋（l/ly/lyh三次），最終得到結果，那麼前兩次的請求相當于浪費了。

而且由于三次接口傳回的時間不确定，很可能會出現頁面最終顯示的資料出現三次搜尋的結果疊加的情況。

性能優化方案：

判斷使用者是否已經輸入完畢，輸入完畢後執行搜尋推薦。

那如何判斷使用者是否已經輸入完畢，約定如果使用者在1000ms無新輸入時，則視為輸入完畢。

這一操作即為函數防抖。

示例代碼如下：

let searchInput = document.querySelector('#searchInput')
let searchTimer

searchInput.oninput = function () {
    // 如果在使用者輸入的範圍内已經存在一個定時器，就将此定時器關閉，啟動新定時器
    if (searchTimer) {
      clearTimeout(searchTimer)
    }
    // 啟動定時器
    searchTimer = setTimeout(() => {
      console.log(this.value)
    }, 1000)
}