JS防抖和节流
在某些场景下,我们可能会频繁触发某个事件或者函数,这时候就需要使用防抖和节流来控制这种情况的发生。
防抖
防抖是指在短时间内多次触发同一个函数,只执行最后一次,或者只在开始时执行一次。防抖的实现原理是设置一个定时器,每当触发事件时先清除之前的定时器,然后重新设置一个新的定时器,等待一定时间后执行函数。
function debounce(fn, delay) {
let timer = null;
return function() {
const context = this;
const args = arguments;
clearTimeout(timer);
timer = setTimeout(function() {
fn.apply(context, args);
}, delay);
};
}
在实际应用中,防抖可以用于输入框搜索,窗口大小调整等场景。
节流
节流是指在一定时间内只执行一次函数。如果在规定的时间内又触发了该函数,则会忽略当前触发,并在下一个时间周期再次执行该函数。节流的实现原理是通过设置一个定时器,在规定时间到达之前,不管触发了多少次函数,都不会执行函数,直到定时器到期。
function throttle(fn, delay) {
let timer = null;
return function() {
const context = this;
const args = arguments;
if (!timer) {
timer = setTimeout(function() {
fn.apply(context, args);
timer = null;
}, delay);
}
};
}
在实际应用中,节流可以用于滚动事件、点击按钮等触发频率较高的场景。
应用场景
防抖和节流是一种常见的优化方式,能够有效地控制某些操作的执行频率,增强页面的性能表现。下面是一些防抖和节流常见的应用场景:
防抖
- 输入框搜索
- 点击提交按钮
- 窗口大小调整
节流
- 滚动事件
- 点击按钮
- 鼠标移动