防抖: 在一定时间内,连续频繁触发函数,函数只会被执行一次。也就是当调用一个函数n毫秒后才会执行该函数,若在这n毫秒内又调用这个函数则将重新计算执行时间。
节流: 一定时间内函数只执行一次,也就是预先设定一个执行周期,当调用函数的时间大于等于设置的执行周期则执行该函数,然后进入下一个新周期。
区别:
防抖是将多次执行变成最后一次执行,而节流是将多次执行变为每隔一段时间执行一次。
代码
// 防抖
export function funcDebounce(fn, delay) {
var delay = delay || 200;
var timer;
return function () {
var th = this;
var args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
timer = null;
fn.apply(th, args);
}, delay);
};
}
// 节流
export function funcThrottle(fn, interval) {
var last;
var timer;
var interval = interval || 200;
return function () {
var th = this;
var args = arguments;
var now = +new Date();
if (last && now - last < interval) {
clearTimeout(timer);
timer = setTimeout(function () {
last = now;
fn.apply(th, args);
}, interval);
} else {
last = now;
fn.apply(th, args);
}
};
}
使用