防抖是高频输入优化手段，用户停止输入指定时间后才执行函数；核心是每次触发时清除旧定时器并重设新定时器；适用于搜索建议等场景，不适用于需即时响应的操作。
防抖（Debounce）是处理高频输入（比如搜索框）最常用、最有效的优化手段之一：它能确保用户停止输入一段时间后，才真正发起请求，避免频繁无效调用接口。
防抖的核心逻辑
每次输入触发事件时，先清除上一次设置的定时器，再重新设置一个新的延迟执行任务。只有当用户“停下来”超过设定阈值（如 300ms），函数才会执行。
- 适合场景：搜索建议、实时校验、自动保存（非关键操作）
- 不适用场景：需要即时响应的操作（如按键音效）、防重复提交（该用节流或禁用按钮）
- 关键点：延迟时间要合理——太短起不到过滤作用，太长（如 >800ms）会让用户觉得卡顿
手写一个可复用的防抖函数
不需要引入 Lodash，几行代码就能搞定：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
function debounce(fn, delay) {
let timer = null;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
用在输入框上：
const searchInput = document.getElementById('search');
const searchFn = debounce((value) => {
if (!value.trim()) return;
fetch(`/api/search?q=${encodeURIComponent(value)}`)
.then(res => res.json())
.then(data => renderSuggestions(data));
}, 300);
searchInput.addEventListener('input', (e) => {
searchFn(e.target.value);
});
注意几个实战细节
- 用 input 事件，不是 keyup：input 能捕获粘贴、拖入、语音输入等所有值变化，更可靠
- 及时清理定时器：组件卸载或输入框销毁前（比如 React useEffect cleanup），记得手动 clearTimeout，防止内存泄漏
- 加 loading 状态或禁用建议区：防抖只控制请求时机，但用户仍可能看到旧结果；建议在请求开始时清空建议列表、显示加载中，避免错乱
- 服务端也要配合做缓存和快速响应：防抖减轻了前端压力，但后端查询慢，体验依然差
进阶：带立即执行选项的防抖（可选）
有些场景希望首次输入立刻查（比如首字母必须响应），之后再防抖。可以扩展成支持 leading 选项：
function debounce(fn, delay, immediate = false) {
let timer = null;
return function (...args) {
const callNow = immediate && !timer;
clearTimeout(timer);
timer = setTimeout(() => {
timer = null;
if (!immediate) fn.apply(this, args);
}, delay);
if (callNow) fn.apply(this, args);
};
}
例如首次输入就查 A，后续连续输 “abc” 只在停顿后查 “abc”。
