我们在做输入框实时查询时,一般会这样写:
<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)
}