为什么在没有连接调试器的情况下比较调试和运行时，我会在此代码中看到不同的输出？

如何解决为什么在没有连接调试器的情况下比较调试和运行时，我会在此代码中看到不同的输出？

<button id="BTN" type="button">Click Me</button>
<p id="p-text"></p>
<p id="p-result"></p>
<script>
    document.getElementById("BTN").addEventListener('click',function () {
        document.getElementById("p-text").innerText = "Calculating...."    // breakpoint set here
        foo();
        // setTimeout(foo,0); 
    })
    foo = function () {
        let result = 0;
        for (let i = 0; i < 1000; i++) {
            for (let j = 0; j < 1000; j++) {
                for (let k = 0; k < 1000; k++) {
                    result = result + i + j + k;
                }
            }
        }
        document.getElementById("p-text").innerText = "Calculate Done"
        document.getElementById("p-result").innerText = result.toString()
    }
</script>

我知道什么时候点击上面页面上的按钮应该将“计算...”替换为“校准完成”并将 foo 函数的结果插入到 p-result 标签中！并且上面的页面永远不应该显示“正在计算...”导致事件队列的顺序。

问题是：为什么当我在 Chrome 中使用调试器时，它会在页面上显示“正在计算...”而 foo 函数还没有结束？

它会显示这个

解决方法

这是因为 debugger 关键字或断点只会阻止 JavaScript 执行；事件循环实际上不会被完全阻塞。
事件循环的 "pause" 部分有一个注释，它要求用户代理 (UA) 不要遵循规范，而是选择一种在保持渲染活动的同时暂停 JS 执行的方法，例如输入"spin the event loop" 算法确实如此。这种状态可以在各种情况下达到，都没有在规范中定义，都不是标准（即所有 UA 都不做）。

定义的是延迟脚本are being fetched。一个不标准的是所有用户提示，如 alert()，其中 Firefox 会不断更新渲染，但 Chrome 不会。

debugger 或断点不是 HTML 规范的一部分（它们确实指定了事件循环的行为），我不知道是否所有支持它的浏览器的行为都相同，但似乎主要供应商实际上做。

请注意，这里的两个示例都没有真正使用“旋转事件循环”算法，因为它们不会执行 true 算法会执行的微任务检查点。