防抖
防抖函数是指一定时间内，事件被频繁触发，但只执行一次。
应用场景：
- input 输入搜索时，当用户停止输入的时候才验证，节约 ajax 请求
- 滚动条滚动，窗口变化的时候，触发事件
示例：
// 简单的防抖动函数
function debounce(func, wait, immediate) {
let timeout; // 定时器
return function () {
clearTimeout(timeout); // 每次触发 scroll handler 时先清除定时器
timeout = setTimeout(func, wait); // 真正想进行的操作 handler
};
}
// 实际想绑定在 scroll 事件上的 handler
function realFunc() {
console.log("Success");
}
// 采用了防抖动
window.addEventListener("scroll", debounce(realFunc, 1000));
// 没采用防抖动
window.addEventListener("scroll", realFunc);
节流
节流函数是指一定时间内方法只执行一次。
应用场景：
- 鼠标不断点击触发，mousedown(单位时间内只触发一次)
- 上拉、触底加载更多
示例：
function throttle(fn, delay) {
let last = 0, // last为上一次触发回调的时间
timer: any = null; // timer是定时器
return function () {
let context = this; // 保留调用时的this上下文
let args = arguments; // 保留调用时传入的参数
let now = +new Date(); // 记录本次触发回调的时间
// 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值
if (now - last < delay) {
// 如果时间间隔小于我们设定的时间间隔阈值
// 则为本次触发操作设立一个新的定时器
clearTimeout(timer);
timer = setTimeout(function () {
last = now;
fn.apply(context, args);
}, delay);
} else {
// 如果时间间隔超出了我们设定的时间间隔阈值
// 那就不等了，无论如何要反馈一次响应
last = now;
fn.apply(context, args);
}
};
}
// 实际想绑定在 scroll 事件上的 handler
function realFunc() {
console.log("Success");
}
// 采用了节流
window.addEventListener("scroll", throttle(realFunc, 1000));
// 没采用节流
window.addEventListener("scroll", realFunc);
