JavaScript事件监听队列疑问：阻塞后按钮点击为何自动触发？

核心逻辑：JavaScript的单线程与事件循环 #

JavaScript是单线程语言，所有代码都在主线程里按顺序执行，同时浏览器会维护一个事件队列，专门存放异步触发的事件（比如按钮点击、定时器回调）。主线程的执行规则很简单：

• 先把当前所有同步代码执行完
• 只有当主线程空闲时，才会从事件队列里取出排队的事件，依次执行对应的回调逻辑

你的代码为什么会出现“延迟触发”？ #

你写的hang函数用了一个同步阻塞的while循环：

function hang(secs) {
    const doneAt = Date.now() + (secs * 1000)
    while (Date.now() < doneAt) {}
}
hang(10)

这段代码会死死霸占主线程整整10秒，期间主线程完全没法处理任何其他任务，包括按钮点击事件。

• 阻塞期间点击按钮：浏览器会捕获到点击事件，但只能把它放进事件队列里排队——主线程被while循环占着，根本没机会处理这些事件，所以看起来点击没反应。
• 10秒后hang函数执行完毕，主线程终于空闲，立刻开始处理事件队列里积压的所有点击事件，于是之前你点的按钮就会“自动”触发——其实不是自动，是之前的点击终于等到了执行的机会。

正确阻止按钮点击的方式 #

不要用同步阻塞的写法，这会让整个页面卡死。正确的做法是异步禁用按钮，比如：

// 获取目标按钮
const targetBtn = document.querySelector('button');
// 禁用按钮，直接阻止点击
targetBtn.disabled = true;

// 10秒后重新启用按钮
setTimeout(() => {
    targetBtn.disabled = false;
}, 10000);

这种方式不会阻塞主线程，页面其他功能还能正常运行，而且能真正实现“10秒内阻止按钮点击”的需求。

内容的提问来源于stack exchange，提问作者Dat Pham