JS中的防抖和节流是解决某些高频率触发的事件(如:浏览器resize、scroll、input等)造成性能浪费和卡顿的问题的方法。
-
防抖(debounce)
指触发事件后在一定时间内不断将触发的事件拦截,等待一定时间后执行,如果在这个等待时间内再次触发,则重新计时,直到等待时间结束才执行相应操作。
下面是一个简单的防抖函数示例:
function debounce(fn, wait) {
let timer = null;
return function() {
if (timer !== null) {
clearTimeout(timer);
}
timer = setTimeout(fn, wait);
}
}
-
节流(throttle)
指在一定时间内只触发一次事件,即减少事件触发的频率。在一定时间内只执行一次操作,无论触发多少次事件。
下面是一个简单的节流函数示例:
function throttle(fn, wait) {
let timer = null;
return function() {
if (!timer) {
timer = setTimeout(function() {
fn.apply(this, arguments);
timer = null;
}, wait);
}
}
}
-
两种方式的差别
防抖是在等待时间结束之后执行一次操作,而节流是一定时间内只执行一次操作。所以,在一些频繁执行操作的场景下,如果需要在最后一次操作完成后立即执行,可以选择防抖函数;如果需要在一段时间内平均分配执行操作,可以选择节流函数。