前端防抖Debounce如何实现

核心概念

防抖的核心是：在事件被频繁触发时，只有最后一次触发后经过指定延迟时间才会执行函数

代码

假设你有一个输入框的 oninput 事件需要防抖处理，用户连续输入时，每次输入都会清除之前的定时器，只有当用户停止输入超过 300ms 后，才会执行 console.log（模拟发送请求），在整个过程中，主线程不会被阻塞，其他代码可以正常执行

const input = document.querySelector("input");
let timer = null;input.addEventListener("input", (e) => {// 清除定时器clearTimeout(timer);// 定时器定时执行的逻辑timer = setTimeout(() => {console.log("发送请求:", e.target.value);}, 300);
});

机制

setTimeout 是同步执行，但是被异步调用.setTimeout 是 JavaScript 中的异步操作，它不会阻塞主线程的执行.调用 setTimeout 时，JavaScript 引擎会将回调函数放入任务队列中，等待当前执行栈清空后才执行.setTimeout 的回调函数不会阻塞主线程的其他代码,也就是说直行到setTimeout后，立马执行了console.log了，但是setTimeout内的逻辑是在等待当前执行栈清空后才被执行的

JavaScript 是单线程语言，所有代码（包括 async 函数）都在主线程上执行，异步操作（如 setTimeout、fetch、Promise）通过 事件循环（Event Loop） 实现，不依赖新开线程

console.log("Start");
setTimeout(() => {console.log("Timeout");
}, 300);
console.log("End");

输出

Start
End
Timeout