javascript 防抖与节流支持并发控制的核心做法是引入一个“执行锁”或“任务队列”机制，在函数被调用时检查当前是否处于执行状态。如果正在执行，则丢弃新请求（防抖）或排队等待（节流），从而避免竞态条件导致的逻辑错误。通过维护一个 `isexecuting` 标志位和必要的回调队列，可以确保同一时刻只有一个任务生效，后续操作按序处理。
如何实现带并发控制的防抖
实现带并发控制的防抖，关键在于利用闭包保存一个 `timer` 和一个 `isRunning` 状态。当触发器再次激活时，清除旧定时器并重置状态；若函数尚未执行完毕，则忽略新请求。这种模式适用于搜索框输入等场景，确保只有最后一次输入且前一次请求完成后才发起新请求。
function debounceWithConcurrency(fn, wait) {
let timer = null;
let isRunning = false;
return function (...args) {
const context = this;
// 如果当前有任务正在执行，直接返回，放弃本次调用
if (isRunning) {
console.log('Task skipped: previous execution ongoing');
return;
}
// 清除之前的定时器
if (timer) clearTimeout(timer);
// 设置新的定时器
timer = setTimeout(() => {
isRunning = true; // 标记开始执行
fn.apply(context, args);
isRunning = false; // 执行结束后释放锁
}, wait);
};
}
上述代码中，`isRunning` 变量充当了并发锁的角色。在 `debounceWithConcurrency` 返回的包装函数中，每次调用首先检查 `isRunning`。如果为真，说明上一次延迟执行的函数体还未运行结束，此时直接 `return`，不更新定时器也不触发新执行。这实现了严格的串行化：只有当上一个任务彻底完成后，下一个任务的定时器才会被允许创建并执行。测试时，快速连续点击按钮，控制台将只打印出最后一次有效触发的结果，中间被丢弃的请求不会引发任何副作用。
立即学习“Java免费学习笔记（深入）”；
如何实现带并发控制的节流
带并发控制的节流通常用于高频事件如滚动或鼠标移动，目的是限制单位时间内的最大执行次数。实现方式是在首次执行时锁定状态，直到设定的间隔时间过去后才解锁。在此期间，所有新触发的事件都被视为无效或被记录（取决于具体需求，此处采用简单的丢弃策略以保持轻量）。这种方式保证了函数在指定时间内最多执行一次，且不会因频繁触发导致主线程阻塞。
function throttleWithConcurrency(fn, interval) {
let isLocked = false;
return function (...args) {
const context = this;
// 如果锁未打开，则执行函数并上锁
if (!isLocked) {
fn.apply(context, args);
isLocked = true;
// 设置定时器在指定间隔后解锁
setTimeout(() => {
isLocked = false;
}, interval);
} else {
console.log('Event ignored: throttle lock active');
}
};
}
在 `throttleWithConcurrency` 的实现中，`isLocked` 布尔值控制了函数的执行权限。当事件触发时，若 `isLocked` 为 `false`，则立即执行目标函数 `fn` 并将 `isLocked` 设为 `true`，同时启动一个定时器在 `interval` 毫秒后将 `isLocked` 重置为 `false`。如果在锁定期间再次触发事件，由于 `isLocked` 为 `true`，函数体内部的逻辑将被跳过。这种机制确保了即使在极高频的触发下，核心业务逻辑也只会按照固定的节奏执行，避免了资源浪费和界面卡顿。结合前两节的防抖方案，开发者可以根据业务对实时性的不同要求，选择串行化的防抖或定频执行的节流，并通过共享的并发控制思想统一处理异步竞争问题。
基于程序中 isRunning 状态的具体问题
在防抖实现中，如果 `isRunning` 状态未在异步操作完成后正确重置，会导致程序永久卡死。例如，若 `fn` 内部包含网络请求且未使用 `.finally()` 或 Promise 链式调用来确保状态复位，一旦请求失败或长时间挂起，`isRunning` 将永远保持 `true`，后续所有合法请求都会被静默丢弃。因此，必须确保无论函数执行成功、失败还是抛出异常，`isRunning` 都能被安全地置为 `false`，通常建议将状态重置逻辑包裹在 `try...finally` 块中或使用 Promise 的 `.finally()` 方法。
