1、函数防抖
在事件被触发 n 秒后，在执行函数，如果 n 秒内被重新触发，则重新计时
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| const debounce=(fn,delay)=>{
let timer=null
return function(){
let context=this //获取debounce执行作用域的this
//如果计时器存在，那么就将计时器取消，新增一个计时器，重新计时
if(timer){clearTimeout(timer)}
timer=setTimeout(()=>{
fn.apply(context,arguments)
},delay)
}
}
const x=x(()=>{console.log('1')},1000)
x()
x() //延迟时间内多次执行，函数只会执行一次
|
代码演示
2、函数节流
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| const throttle = (fn, delay) => {
let timer;
return function () {
const context = this;
if (!timer) {
timer = setTimeout(() => {
timer = null;
fn.apply(context, arguments);
}, delay);
}
};
};
const x=throttle()
x()
x()
|
代码演示