防抖应加在上级选项变化触发的子级加载函数中，如“根据省份ID获取城市列表”，而非change事件监听里；需同步清空子级、显示loading、处理错误，并避开首次加载。
中级联下拉菜单用防抖，核心是“等用户选完再发请求”，而不是每选一次就调一次接口。重点不是防抖本身，而是把防抖和联动逻辑绑对地方——通常防抖加在“上级选项变化”触发的子级加载动作上，而不是输入框那种连续事件。
防抖该加在哪儿？
不是加在下拉菜单的 change 事件监听里直接发请求，而是加在触发子级加载的函数里。比如用户选了“省份”，你要加载“城市”，这个“根据省份 ID 获取城市列表”的操作才需要防抖。
- 上级选择变化后，先清空子级下拉、置为禁用，再调用防抖后的加载函数
- 如果用户快速切换几次省份（比如连点北京、上海、广东），只最后一次会真正发起请求
- 注意：首次加载或重置时，不建议防抖，可设个开关（如
skipDebounce = true）绕过
一个轻量防抖函数怎么写？
不用引入 Lodash，自己写 5 行够用：
<!-- 示例 -->
立即学习“Java免费学习笔记（深入）”；
function debounce(fn, delay) {
let timer;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
<p>// 绑定到加载城市的方法上
const loadCities = debounce((provinceId) => {
fetch(<code>/api/cities?province=${provinceId}</code>)
.then(res => res.json())
.then(data => renderCitySelect(data));
}, 300);联动时要注意的细节
防抖只解决“频繁触发”，但联动本身还有几个易错点：
- 清空子级数据要同步：上级一变，立刻清空子级选项并重置 value，避免残留旧数据误导用户
- loading 状态要体现：防抖期间不能让用户以为没响应，加个 loading 提示或禁用子级下拉
- 错误处理别丢：请求失败时要恢复子级可操作状态，并给提示，否则用户卡住无反馈
-
取消重复请求（可选增强）：配合
AbortController，在新请求发出前 abort 上一个，避免旧响应覆盖新数据
什么时候不该用防抖？
不是所有联动都要防抖：
- 只有两级且选项少（如国家→省份），数据量小、接口快，防抖意义不大
- 用户明确需要“所见即所得”反馈（如筛选条件实时影响表格），这时可能更适合节流或带骨架屏的即时加载
- 移动端触摸场景下，用户切换选项更慢，300ms 防抖可能反让人感觉延迟，可降到 150ms 或去掉
