本文介绍通过状态标志（flag）机制实现函数执行的互斥控制，确保动画、异步操作等耗时任务不会因频繁触发而叠加执行，从而避免 ui 错乱或逻辑异常。
本文介绍通过状态标志（flag）机制实现函数执行的互斥控制，确保动画、异步操作等耗时任务不会因频繁触发而叠加执行，从而避免 ui 错乱或逻辑异常。
在 JavaScript 中，当用户快速多次点击按钮（如触发动画或 API 请求）时，若函数内部包含 setTimeout、fetch 或其他异步逻辑，极易出现“竞态执行”问题：前一次调用尚未结束，后一次已启动，导致状态错乱、UI 行为异常（例如本例中提示语反复切换、实际状态未同步更新）。
核心解决方案是引入一个布尔型状态标志 isRunning，用于标记函数当前是否处于执行中：
let x = 1;
let isRunning = false;
function test() {
// ✅ 入口拦截：若正在运行，则立即退出，不执行任何逻辑
if (isRunning) return;
// ✅ 标记为“运行中”，阻止后续调用进入
isRunning = true;
if (x === 1) {
x = 0; // ⚠️ 注意：原代码中误用了双等号（==）赋值，应为单等号（=）
document.getElementById("test").innerHTML = "I was clicked.";
setTimeout(() => {
x = 1;
isRunning = false; // ✅ 关键：必须在异步完成时重置标志
}, 5000);
} else {
document.getElementById("test").innerHTML = "You already clicked me!";
isRunning = false; // ✅ 同步路径也需重置
}
}
⚠️ 重要修正与注意事项：
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 原示例中
x == 0和x == 1是错误的比较操作，应改为赋值x = 0和x = 1；否则状态永远不会变更，逻辑彻底失效。 -
isRunning = false不能放在函数末尾统一执行（如初稿所示），因为setTimeout是异步的，函数主体会立即执行完毕并重置标志，导致第二次点击仍能通过检查——必须在setTimeout回调内重置，或使用Promise+async/await封装后统一处理。 - 更健壮的写法可结合
Promise实现自动状态管理：
let x = 1;
let pending = Promise.resolve();
function test() {
pending = pending.then(() => {
if (x !== 1) {
document.getElementById("test").innerHTML = "You already clicked me!";
return;
}
x = 0;
document.getElementById("test").innerHTML = "I was clicked.";
return new Promise(resolve => {
setTimeout(() => {
x = 1;
resolve();
}, 5000);
});
});
}
该方式天然保证串行执行，无需手动维护 isRunning，适合复杂异步流程。但对简单场景，布尔标志法更轻量、易理解。选择哪种方案，取决于项目复杂度与可维护性需求。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
