手写防抖节流原创
# 防抖函数
核心思想:短时间内只允许最后一次点击触发 只要函数被调用,就会重新开启定时器 只有一个定时器到点才会调用函数
如果需要立即触发,就在调用函数时立马执行一次 但要确保重复触发时不会再去执行 因此一般是在定时器里边来控制是否执行的变量
function debounce(fn,delay,trigger){
let timer = null;
return function(){
if(timer){
clearTimeout(timer);
}
if(trigger){
let exec = !timer;
timer = setTimeout(()=>{
timer = null;
},delay)
if(exec){
fn();
}
}
else{
timer = setTimeout(()=>{
fn();
},delay)
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 节流函数
核心思想:短时间内只触发一次 定时器存在时,直接返回不进行任何操作 只有一个定时器到点才允许重新开启定时器
如果需要立即触发,则在函数调用时立马执行 为了确保到点后能够再次被触发 一般在定时器内部去控制能否触发的变量
function Throttle(fn,delay,trigger){
let timer = null;
return function(){
if(timer){
return
}
if(trigger){
timer = setTimout(()=>{
timer = null;
})
fn();
}
timer = setTimeout(()=>{
timer = null;
fn();
},delay)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20