一、防抖函数
- 性质:当我们在短时间内快速多次重复一个相同操作时,只响应第一次或最后一次的操作。
- 应用场景:input输入框值改变是发请求,onmousemove, resize, onscroll等等
- 函数体:
function debounce(fn, delay) { //fn要执行的函数,delay表示多少毫秒内就不执行
let timer = null;
return function() {
let that = this; // 注意 this 指向
let args = arguments; // arguments取出参数
if (timer) { //如果计时器存在,重置计时
clearTimeout(timer);
}
timer = setTimeout(() => {
fn.apply(that, args)
}, delay)
}
}
二、节流函数
- 性质:当我们频繁执行同一个操作,不需要每个操作都响应,只需要固定时间间隔响应。
- 应用场景:轮播图左右切换等
- 函数体:
function throttle(fn, delay) {
let timeout = null;
return function() {
let that= this;
let args = arguments;
if (!timeout) {//如果没有计时就不执行,每个一段时间执行一次
timeout = setTimeout(() => {
timeout = null;
fn.apply(that, args)
}, delay)
}
}
}
}