之前是在自己的项目中直接扒了一下网上的代码,最近看前端的面经中算是有了一点自己的体会吧,debounce和throttle的主要目的就是限制执行操作的频率,我个人也不太会去记住谁是谁(因为他们确实是差不多,我也不知道为什么要专门区分),网上也有很多写法,我认为最简单的写法大概如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//throttle
function throttle(fn, delay) {
let timer = null;
return function(){
if(timer) return;
else{
timer = setTimeout(()=>{
fn.apply(this, arguments);
timer = null;
}, delay);
}
}
}
//debounce
function debounce(fn, delay) {
let timer = null;
return function(){
if(timer) clearTimeout(timer);
else{
timer = setTimeout(()=>{
fn.apply(this, arguments);
}, delay);
}
}
}

我觉得两者的区别无非就是当有某段时间内要执行一个函数时,是抢占还是避让,有点类似于操作系统的进程调度的一种感觉吧,关键就是你想让每次调用都取消前面的调用还是说你想让每次调用时如果前面有已经调用就跳过。
我之前使用的场景是一个在线编辑器脱离焦点自动保存的一个东西,我觉得这个场景肯定是要取消之前的调用更好。