函数防抖
- 无论事件触发多频繁， 只在最后一次事件触发后一段时间后执行一次，核心思想是维护一个定时器， 如果延后时间没到就覆盖原定时器
function debounce(fn, delay) {
let timer = null;
return function() {
let context = this;
let args = arguments;
clearTimeout(timer);
timer = setTimeout(function() {
fn.apply(context, args);
}, delay)
}
}
当你需要限制下面函数
function fn() {
console.log(1)
}
可以这样去连续调用n次试一下
debounce(fn, 100)();
函数节流
- 无论事件触发多频， 都会在一定的时间段之后执行一次，核心思想就是维护一个时间段， 到了之后就执行
function throttle(fn, delay) {
let prev = Date.now()
return function() {
let context = this;
let args = arguments;
let now = Date.now();
if (now - prev >= delay) {
fn.apply(context, args)
prev = now;
}
}
}
定时器实现
function throttle(fn, delay) {
let timer = null;
return function() {
let context = this;
let args = arguments;
if (!timer) {
timer = setTimeout(function() {
fn.apply(context, args);
timer = null
}, delay)
}
}
}
