节流(throttle)和防抖(debounce)是为了解决函数频繁触发而引发性能问题的两种优化方法。
节流: 指定一个时间间隔,在时间间隔内只执行一次函数,即在一段时间内,多次触发函数只执行一次。常见的应用场景如页面滚动、窗口大小调整等。
示例代码:
function throttle(fn, delay) {
let timer = null;
return function () {
const context = this;
const args = arguments;
if (!timer) {
timer = setTimeout(() => {
fn.apply(context, args);
timer = null;
}, delay);
}
};
}
防抖: 指定一个时间间隔,在该时间间隔内重复触发函数时,只执行最后一次。常见的应用场景如输入框输入、搜索框输入等。
示例代码:
function debounce(fn, delay) {
let timer = null;
return function () {
const context = this;
const args = arguments;
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(context, args);
}, delay);
};
}