debounce不能直接传handlesearch是因为它返回新函数而非立即执行，需预先创建并绑定；获取实时input值应放在防抖函数内部或通过箭头函数传参；搜索场景推荐trailing:true；原生实现可行但需注意this和参数透传；debounce不解决请求竞态问题。
debounce 在输入框里为什么不能直接传 handleSearch？
因为 debounce 返回的是一个新函数，不是立即执行的原函数。如果写成 oninput="debounce(handleSearch, 300)"，每次输入都新建一个防抖函数但不调用它，等于什么也没做。
常见错误现象：输入框毫无响应，控制台也无报错，但 handleSearch 从不触发。
- 必须提前创建并保存 debounced 函数，比如：
const debouncedSearch = debounce(handleSearch, 300) - 绑定事件时直接使用这个变量：
input.addEventListener('input', debouncedSearch) - 不要在事件回调里现场调用
debounce，那会每次新建、每次丢弃
如何让 debounced 函数能拿到当前 input 的值？
debounce 包裹后，原始函数的参数传递方式没变，但你得确保传进去的是「当时」的值，而不是闭包里旧的引用。
典型陷阱：在全局定义 debouncedSearch，但函数体内读取的是初始时的 input.value，后续输入永远拿不到最新值。
- 正确做法是把获取值的逻辑放进被防抖的函数里，比如：
function handleSearch() { const query = input.value.trim(); /* ... */ } - 或者用箭头函数内联传参：
input.addEventListener('input', () => debouncedSearch(input.value))，此时debouncedSearch需定义为(query) => { ... } - 避免在 debounce 外层捕获 DOM 值，尤其不要在添加事件前就取一次
input.value
Lodash debounce 的 leading 和 trailing 怎么选？
搜索场景下几乎只用 trailing: true（默认），即等用户停顿后再查；leading: true 是立刻执行一次再防抖，容易造成首字就发请求，浪费资源。
如果你用的是 Lodash v4.17+，debounce 默认就是 { leading: false, trailing: true }，不用显式写。
- 搜索建议类功能可考虑
{ leading: true, trailing: true }，首次输入立即展示热门词，停顿后再查精准结果 - 但要注意：两个选项同时为
true时，若用户快速连打，可能触发两次——第一次是 leading，第二次是 trailing，中间间隔不够长 - 生产环境建议加个取消机制：
debouncedSearch.cancel()，比如在组件卸载或切换搜索字段时调用
不用 Lodash，原生实现够用吗？
够用，而且更轻量。一个标准的防抖函数 10 行以内就能写完，不需要引入整个 Lodash。
但要注意：原生实现容易漏掉 this 绑定和参数透传，Lodash 版本已处理好这些边界。
- 最小可用版：
function debounce(fn, delay) { let timer; return function(...args) { clearTimeout(timer); timer = setTimeout(() => fn.apply(this, args), delay); } } - 如果函数里用了
this（比如 Vue 方法），必须用fn.apply(this, args)，不能写成fn(...args) - 现代项目中，若已用 Lodash，直接用
_.debounce更省心；若没引入，别为一个函数特地加依赖
真正容易被忽略的是：debounce 只控制频率，不解决请求并发或竞态问题。比如用户快速输入“abc”→“ab”，后发的“ab”请求可能比先发的“abc”还晚返回，覆盖结果。这时候得配合 AbortController 或请求 cancel 逻辑，不是 debounce 单独能搞定的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
