为何浏览器主线程阻塞后仍能正常响应用户输入？

问题重现步骤 #

• 点击lock 5s按钮：JavaScript进入死循环，浏览器主线程被阻塞
• 在阻塞的5秒内，在输入框中输入任意内容或多次点击btn按钮
• 等待5秒后，控制台会突然批量打印出大量on input或btn的日志

原本预期阻塞期间的用户操作不会被响应，解锁后控制台仅输出start lock和end lock，但实际并非如此。

代码示例 #

<!DOCTYPE html>
<html lang="en">

<head></head>

<body>
  <input id="input" type="text" />
  <button id="lock">lock 5s</button>
  <button id="btn">btn</button>
  <script>
    document.querySelector("#input").addEventListener("input", () => {
      console.log("on input", input.value);
    });

    document.querySelector("#lock").addEventListener("click", () => {
      console.log("start lock");
      const start = performance.now();
      while (performance.now() - start < 5000) continue;
      console.log("end lock");
    });
    document.querySelector("#btn").addEventListener("click", () => {
      console.log("btn");
    });
  </script>
</body>

</html>

原因解释 #

这是浏览器单线程事件循环模型的特性：

• 浏览器的JS执行、UI渲染都在同一个主线程，所有任务会按顺序排队等待执行。
• 当主线程被死循环阻塞时，用户的点击、输入等操作会被浏览器捕获，对应的事件回调会被加入到事件队列中暂存，但此时主线程被死循环占用，无法处理这些排队的任务。
• 直到死循环结束，主线程空闲下来，才会依次执行事件队列里堆积的所有回调函数，所以会一次性打印出所有延迟的日志。

简单来说：阻塞期间用户操作的事件并没有丢失，只是被暂时存起来了，等主线程有空就会一起处理。

实现“阻塞期间忽略用户操作”的方法 #

如果要达到你预期的效果，有两种常见方式：

1. 禁用交互元素

在阻塞期间直接禁用输入框和按钮，让用户无法触发事件：

document.querySelector("#lock").addEventListener("click", () => {
  console.log("start lock");
  // 禁用交互元素
  const input = document.querySelector("#input");
  const btn = document.querySelector("#btn");
  input.disabled = true;
  btn.disabled = true;
  
  const start = performance.now();
  while (performance.now() - start < 5000) continue;
  
  console.log("end lock");
  // 恢复交互
  input.disabled = false;
  btn.disabled = false;
});

2. 用标记变量过滤事件

设置一个锁状态变量，在事件回调里判断是否忽略当前操作：

let isLocked = false;

document.querySelector("#input").addEventListener("input", () => {
  if (isLocked) return;
  console.log("on input", input.value);
});

document.querySelector("#btn").addEventListener("click", () => {
  if (isLocked) return;
  console.log("btn");
});

document.querySelector("#lock").addEventListener("click", () => {
  console.log("start lock");
  isLocked = true;
  
  const start = performance.now();
  while (performance.now() - start < 5000) continue;
  
  console.log("end lock");
  isLocked = false;
});

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