javaScript函数之防抖与节流
函数防抖(Debounce)
构造原因:在实际开发中,有些事件可能触发频率非常高,比如窗口大小调整、鼠标移动等。如果每次都对这些事件进行响应,可能会造成浏览器性能下降,甚至导致页面卡顿。使用函数防抖,我们可以确保这些高频事件只在真正需要的时候被处理,从而提高页面性能。
// 函数防抖的作用:防止短时间内高频繁调用同一接口的方法
// 防抖:设置延时器,短时间高频率触发,只触发最后一次
var timer = null;
var btn = document.getElementById('btn');
btn.onclick = function () {
clearTimeout(timer)
timer = setTimeout(() => {
console.log('1');
}, 1000)
}
// 以上是通过一个定时器来模拟调用接口的异步操作
原理:在事件被触发n秒后再执行函数,如果在这n秒内又被重新触发,则重新计算执行时间。这样可以确保一个函数在一定时间内只执行一次,如果这个函数持续被触发,那么它的执行时间将会被不断的推迟。
函数节流(Throttle)
构造原因:和函数防抖类似,函数节流也是为了处理高频触发的事件。与防抖不同的是,节流保证的是在一段时间内事件至少会被处理一次,而不是像防抖那样可能永远不会被处理。这在一些需要定期更新数据或执行操作的场景中非常有用,比如实时搜索、滚动加载等。
// 节流:设置状态锁,短时间高频率触发只有第一次触发成功
var key = false;
btn.onclick = function () {
if (!key) {
key = true;
setTimeout(() => {
console.log('1');
key = false;
}, 1000);
}
}
原理:如果持续触发事件,每n秒只会执行一次函数。这意味着函数会在每n秒的间隔内执行一次,无论在这n秒内事件被触发了多少次。
总结
函数防抖和节流都是优化高频触发事件的技术,它们的主要区别在于处理事件的方式。防抖侧重于在事件触发后的一段时间内只执行一次函数,而节流则保证在一段时间内事件至少会被处理一次。根据具体的应用场景和需求,我们可以选择使用防抖还是节流来优化我们的代码。