前端性能优化之函数防抖

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

<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时，只会执行最后一次查询，完美~

 

将防抖函数抽象成工具函数，如下：

export const debounce = (() => {
  let timer = null;
  return (callback, wait = 800) => {
    timer && clearTimeout(timer);
    timer = setTimeout(callback, wait);
  };
})();

在Vue中使用：

methods: {
    loadList() {
      debounce(() => {
        console.log('加载数据')
      }, 500)
    }
}