我正在尝试制作井字游戏，为此我必须解决这个问题：答案

【问题标题】：I am trying to make a tic-tac-toe game and to do so I have to have solve this:我正在尝试制作井字游戏，为此我必须解决这个问题：
【发布时间】：2021-01-09 19:28:55
【问题描述】：

我希望在单击按钮后 while 循环停止，但我的整个屏幕都被冻结了，并且窗口似乎对任何类型的事件都没有反应。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button>Click ME!</button>
  <script>
    const btn = document.querySelector("button");
    let clicked = false;
    btn.addEventListener("click", ()=>{
        console.log("clicked");
        clicked = true;
    })
    while(!clicked){
        console.log("I am waiting")
    }
  </script>
</body>

</html>

【问题讨论】：

你有一个永无止境的循环

标签： javascript dom-events tic-tac-toe

【解决方案1】：

您的 while 循环会立即运行且没有中断，并且会阻止代码执行

你可能是这个意思

const btn = document.querySelector("button");
let clicked = false;
btn.addEventListener("click", () => {
  console.log("clicked");
  clicked = true;
})
let iId = setInterval(function() {
  if (clicked) clearInterval(iId); // clear the interval
  else console.log("I am waiting"); // continue the interval
}, 1000)

&lt;button&gt;Click ME!&lt;/button&gt;

【讨论】：

谢谢，这是我解决这个问题的唯一方法吗？
可能不会。为什么这样不行？
我想知道我是否可以使用 Promise 或异步函数？
我会在我的tic tac toe游戏中实现它，如果我在游戏循环之前已经添加了eventlistener，我如何让我的ai等待用户点击？
间隔或developer.mozilla.org/en-US/docs/Web/API/window/…

【解决方案2】：

这是因为您的代码添加了一个事件侦听器（供稍后使用），然后有一个循环等待clicked，但它实际上会阻止addEventListener 的执行。虽然有代码正在运行（如您的循环），但您（作为用户）甚至无法单击页面，即使可以，addEventListener 回调也会在循环结束后执行。所以这是一种僵局。

我建议你阅读一下Event loop，它是 JavaScript 运行时的主要机制，以便更好地理解这一点。

【讨论】：