JavaScript中禁用按钮的点击事件排队现象解析

我对以下代码片段的行为感到困惑。我有一个按钮，点击后会在执行长时间计算期间变为禁用状态。

function delay() {
    console.log('start');
    for (let x = 0; x < 4000000000; x++) {
        Math.sqrt(20);
    }
    console.log('done');
}

function click() {
    button.disabled = true;
    setTimeout(() => {
        delay();
        button.disabled = false;
    }, 0);
}
const button = document.getElementById('button');
button.addEventListener('click', click);

按钮成功禁用并执行长时间计算，但出现了奇怪的现象：当按钮处于禁用状态时，若多次点击它，会有一个点击事件被排队，在当前计算完成后再次触发click()函数。

我原本的认知是禁用元素不应触发或排队任何事件。基于对JavaScript微任务、宏任务以及UI更新机制的了解，我原本预期按钮在禁用状态下完全不会响应点击，但实际观察到的是，尽管按钮已禁用，若在禁用期间多次点击，仍会有一个点击事件被排队。

原因解释 #

问题核心在于UI更新时机和浏览器事件队列的处理逻辑：

• button.disabled = true 不会立即生效
  JavaScript是单线程模型，你在click回调里设置按钮禁用后，主线程仍在处理当前的点击事件，浏览器的UI渲染任务要等到当前宏任务执行完毕才会启动。这意味着按钮的禁用状态在浏览器的事件判断系统里，并不会立刻被标记，视觉上的禁用效果也会滞后。

• 点击事件的判断基于UI更新前的状态
  当你在按钮视觉上显示“禁用”时点击它，此时浏览器还没完成UI状态的更新，按钮在事件系统中仍属于可交互状态，所以这些点击会被正常加入事件队列。不过浏览器有优化逻辑：同一按钮在短时间内的重复点击会被合并，最终只会保留一个点击事件，所以你会看到计算完成后仅触发一次click()。

• setTimeout的宏任务延迟了状态恢复，但事件已排队
  你用setTimeout把计算逻辑放到下一个宏任务，当前click回调执行完毕后，浏览器才会完成UI更新（按钮真正变为禁用状态），但在此之前的点击事件已经被加入队列。等到计算完成、按钮重新启用后，队列里的点击事件就会被执行。

简言之：设置禁用的代码和浏览器实际标记按钮为“不响应点击”之间存在延迟，这段时间内的点击已被浏览器接收排队，最终因事件合并只触发一次。

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