Intro
什么是防抖，为什么需要防抖？
问题的引入是这样的，假设你在开发一个这样的功能：用户在一个输入框内打字，随后会根据用户实时输入框中的文字，去服务器内去查找对应的联想词。这种场景应该很常见吧？例如google的搜索，或者最简单的在后台管理系统中，选项比较多，可能有很多个，用户可以输入关键词，然后弹出最合适的选项。
如果不考虑任何其他任何东西，前端代码可能是这样的：
const input = document.getElementById('myInput');
input.addEventListener('input', function(e) {
// 实时处理输入
const value = e.target.value;
console.log(value);
// 向后端发送请求
});
当然，还有其他场合，例如使用echart这种图表库的时候，用户拖动了页面，改变了页面大小，我们需要重设DOM的宽高，让echart重渲染。
但总之，无论是input事件监听这种需求，还是根据条件resize这种需求，他们都有一个共同点：事件的发生极其频繁，而处理函数的开销很大。为什么这么说呢？我们的input事件的处理函数需要远程向后端服务器要数据，而只要用户输入哪怕一个abcd这样的字母，都会触发input事件，导致我们运行处理函数，向后端发送请求。那后端吃得消嘛？第二个resize的例子里面，用户改变页面尺寸大小的过程也不是一瞬间就完成的，把页面从1000px的宽改为500px的宽的过程中可能就触发了上百次resize事件，每次处理的时候难道都让echart重渲染一次嘛？可是用户只需要看到我拖动完成之后，图表自适应我的页面就好了啊？拖动的过程中我不需要自适应我的页面，而且这么干会导致严重的卡顿，性能问题。
解决方案
所以解决方案是什么？这个问题有两个要素，第一个是事件的触发，第二个是事件的处理。那我们能够改变事件触发的频率嘛？不能，因为这是浏览器的原生逻辑，我们没有办法改变。那就只能让事件触发的时候，我们的处理方式优化一下。上文intro部分谈到了用户其实只在乎我改变页面尺寸之后，图表自适应页面宽高就行了，我要的只是结果，过程不care。那input的例子也是一样的。我去搜我想要的选项的时候，肯定是我输入了某个单词之后，我才期待你去根据我输入的单词，给我可选的多个单词组成的这些选项。也就是说，用户并不期待即时反馈。那我能够预判到用户什么时候真正想要结果了嘛？可以的，兄弟。简化一些，input的例子中，如果我在不断地输入字母，那么就意味着我还正在输入单词，那此时我就不应该向服务器发起网络请求，因为用户没有输入完成。距离用户上一次输入，大概200ms或者500ms吧，可以认为用户停止输入了，那么可能这个时候用户就是想要触发关键词联想，给我展示相关的选项了。resize的例子中，如果我在不断地调整窗口的大小，鼠标没有放手，那就意味着我对当前的尺寸还不满意，就意味着我还不需要让echart重渲染。
所以，我们的函数要怎样做一个“升级”，他能够知道离上次运行的时间，只有超出了某个特定的一段时间，我才真正执行逻辑，否则就运行呢？更确切地说，如果在没有超出设定的某个值，例如500ms的时候，又有同样的事件触发了，我不仅要忽略掉这个事件，我还重新计时，重新等500ms。只有等到真正再过500ms之后，我才真正开始执行逻辑。
从代码的层面上来说，我们需要的就是这样的一个名为debounce的函数，我把我的事件处理函数传给你，你返回一个新的函数，这个新的函数能够实现我之前所说的东西：
functiondebounce(fn){
// 做一些事情
return newFunc;
}
functionmyEventHandler(){
// do something
}
const newHandler = debounce(myEventHandler);
input.addEventListener('input', newHandler);
代码实现
那么，就开始实现吧。
创建两个文件，一个名为debounce.js提供debounce函数。另一个名为index.js，用于测试结果。初始如下：
// debounce.js
exportfunctiondebounce(fn) {
return fn;
}
// index.js
import { debounce } from"./debounce.js";
functionhello() {
console.log('hello world');
}
const debounceHello = debounce(hello);
debounceHello();
我们先让debounce函数什么也不干，你传给我什么，我就原封不动地返回，以上代码会输出hello world。
然后我们加上“延迟”的功能，延迟用什么做？最简单的setTimeout,这样，你给我传入我要处理的函数，并且再说明要延迟多少时间，我就帮你返回这样的一个新函数。这个新函数跟原函数一模一样，除了会延迟指定的时间，不指定的话，默认500ms
exportfunctiondebounce(fn, duration = 500) {
functionfuc() {
setTimeout(() => {
fn()
}, duration);
}
return fuc;
}
这个时候运行debounceHello函数，就应该500ms之后再print hello world了。
完了吗？还没完，回到我们真实的应用场景，如果瞬间运行多次这个函数，那不还是最终运行了这么多次？只不过延迟罢了。
// index.js
import { debounce } from"./debounce.js";
functionhello() {
console.log('hello world');
}
const debounceHello = debounce(hello);
debounceHello();
debounceHello();
debounceHello();
这里在500ms之后，会连续地输出3次hello world，这不是我们想要的。
于是对debounce稍作修改：
exportfunctiondebounce(fn, duration = 500) {
let timeId;
functionfuc() {
if (timeId) {
clearTimeout(timeId);
}
timeId = setTimeout(() => {
fn()
}, duration);
}
return fuc;
}
这样就只会运行一次了。因为当第二次进入到fuc的函数体的时候，发现已经有一个timeId了，意味着已经有一个计时器了。那么我就应当把之前的那个计数器删掉，重新计时。这样三次调用，只有最后一次会在500ms之后运行。
完了吗？没完。真实的函数是有入参的，我们的hello函数其实长这个样子：
functionhello(name) {
console.log(`hello ${name}`);
}
是有入参的，如果用我们当前的这个debounceHello，name就为undefined了，没有带过来。
所以这样才是正确的：
exportfunctiondebounce(fn, duration = 500) {
let timeId;
functionfuc(...args) {
if (timeId) {
clearTimeout(timeId);
}
timeId = setTimeout(() => {
fn(...args);
}, duration);
}
return fuc;
}
要把fuc函数接受到的参数，原封不动地传给fn。
完了吗？还没完。接近完美了，但是确实还没完。看回input的例子：
const input = document.getElementById('myInput');
input.addEventListener('input', function(e) {
// 实时处理输入
const value = e.target.value;
console.log(value);
// 向后端发送请求
});
JavaScript中的this的指向并不像Java啊，C sharp啊，C++那么明确，在很多不同的语境下，this的值是不同的，并且甚至很多时候可以自定义里面是个什么东西。在这个例子中，我们的function的this的指向是什么？this的指向是input，这是浏览器绑定事件的规则，事件处理函数中的this永远都是前面调用addEventListener的那个对象，相当于说，浏览器并不是直接调用我们的函数的，而是采用这样的方式调用的：
myEventHandler.call(input,xxxxxxx);
所以this指向是input。
但我们这个例子就丢失了浏览器给我传的那个this，测试一下，把hello函数改成这个：
functionhello(name) {
console.log("this value is: ", this);
console.log(`hello ${name}`);
}
你会发现this的value为undefined。为什么是undefined？因为我们的debounce函数中，调用fn的方式是直接调用，而没有手动绑定我们接收到的this。当以这样的方式调用debounceHello时：
import { debounce } from"./debounce.js";
functionhello(name) {
console.log("this value is: ", this);
console.log(`hello ${name}`);
}
const debounceHello = debounce(hello);
const obj = { a: 1, b: "h" };
debounceHello.call(obj, "xiaoming");
debounceHello.call(obj, "xiaoming");
debounceHello.call(obj, "xiaoming");
debounceHello.call(obj, "xiaoming");
debounceHello.call(obj, "xiaoming");
obj确实作为debounceHello的this传进去了，也就是fuc的this就是obj了，在settimeout函数中，箭头函数的this跟外层的this保持一致，但是在调用fn的时候漏传了，所以最终this的值是undefined。
于是，我们补上最后一步，就是完美的防抖函数了：
exportfunctiondebounce(fn, duration = 500) {
let timeId;
functionfuc(...args) {
if (timeId) {
clearTimeout(timeId);
}
timeId = setTimeout(() => {
fn.call(this, ...args);
}, duration);
}
return fuc;
}
最终同时补上完整的index.js：
import { debounce } from"./debounce.js";
functionhello(name) {
console.log("this value is: ", this);
console.log(`hello ${name}`);
}
const debounceHello = debounce(hello);
const obj = { a: 1, b: "h" };
console.log("program start at: ",newDate().toISOString());
debounceHello.call(obj, "xiaoming");
debounceHello.call(obj, "xiaoming");
debounceHello.call(obj, "xiaoming");
debounceHello.call(obj, "xiaoming");
debounceHello.call(obj, "xiaoming");
setTimeout(() => {
console.log("set timeout at 300ms: ",newDate().toISOString());
debounceHello.call(obj, "xiaoming");
}, 300);
setTimeout(() => {
console.log("set timeout at 900ms: ",newDate().toISOString());
debounceHello.call(obj, "xiaoming");
}, 900);
最终运行结果：
program start at: 2026-04-05T11:20:37.470Z
set timeout at 300ms: 2026-04-05T11:20:37.780Z
this value is: { a: 1, b: 'h' }
hello xiaoming
set timeout at 800ms: 2026-04-05T11:20:38.375Z
this value is: { a: 1, b: 'h' }
hello xiaoming
前面五次一瞬间的触发都被取消了，而900ms后的触发与第300ms之间相差了600ms，所以并没有打断300ms的那次运行，最终运行2次。函数的入参和this都被很好地保留了下来。
尾声
尾声就是没有尾声，debounce函数比较简单，没有那么多感慨。单纯因为换掉了之前打字很难受的键盘，手痒所以写一篇短文练练打字手感(
