前端性能优化之函数防抖

我们在做输入框实时查询时，一般会这样写：

<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)
}

此时，用户再连续输入lyh时，只会执行最后一次查询，完美~