防抖和节流是在js性能优化方面非常重要的一环,它们主要针对的是一些短时间内会被频繁触发的事件,比如监听输入框的输入事件来验证表单,监听页面的滚动事件来实现列表的加载,窗口的 resize 事件等等,这类事件都有触发频次高,间隔时间很短的特点,如果这个事件的回调函数涉及到很多计算以及DOM的重绘的话,就可能会导致卡顿,影响到用户体验,所以我们最好是使用防抖和截流这样的函数来优化一下。
应用场景:
搜索时防止频繁向服务器发送请求等
debounce(func, delay=500){
let timer ;
return function (...args) {
if(timer) clearTimeout(timer)
timer = setTimeout(()=>{
func.apply(this,args)
},delay)
}
}
使用方法:
将发送请求的函数传入debounce()中