防抖
原理:在事件触发n秒后,执行方法。如果在n秒内被重新触发,则重新开始计时。结果就是将频繁的事件合并成一次。
例如:电梯每5秒会开始运作。如果在5秒内,有人进来,则重新计时,直到超过5秒。
场景:input输入数据请求服务
实现:
function debounce(fn,time) {
let timer = null; // 计时器
return function () {
// 重置计时器
clearTimeout(timer);
timer= setTimeout(() => {
fn.apply(this, arguments);
}, time);
};
}
节流
原理:事件在触发n秒内,执行方法。如果n秒内再次触发,不重置。结果是将一定时间内的重复事件合并成一次。
场景:上拉加载数据
实现:
1. 定时器
function throttle(func, wait) {
var timeout;
return function() {
if (!timeout) {
timeout = setTimeout(function(){
timeout = null;
func.apply(this, arguments)
}, wait)
}
}
}
2. 时间戳
function throttle(func, wait) {
var previous = 0;
return function () {
var now = Date.now();
if (now - previous > wait) {
func.apply(this, arguments);
previous = now;
}
}
}
小结
防抖的思想是在一系列高频操作结束后,等待一定时间后执行一次。节流是在一定时间内,只执行一次。