Javascript 在模式中包装处理任务不工作

我正在编写一个小应用程序，它对一个需要几秒钟以上时间的输入进行一些处理，所以我想将处理封装在一个模式中，例如

function exec()
{
    modal = document.getElementById("modal");
    modal.style.display = "block";

    // processing

    modal.style.display = "none";
}

这是JFiddle：

据我所知，Javascript是一种同步语言，但通过一些调试，它看起来像是直接跳转到for循环，而不显示模式

---

此外，如果我在浏览器的开发工具中设置断点，它似乎工作得非常好。我不是web开发人员，因此不知道Javascript是如何执行的；如果事情正在重新安排，等等。

你应该使用承诺。exec函数的实现方式会立即隐藏模式

函数execButton（）{
modal=document.getElementById（“inModal”）
modal.style.display=“块”
//花点时间来展示模态
setTimeout（函数（）{
const longTask=新承诺（函数（解析、拒绝）{
释放=0
对于（设i=0；我曾经尝试过承诺，但无法实现。此解决方案工作得很好。我必须等待7个小时才能给你奖金。你能更详细地解释为什么它最初对我不起作用吗？为什么它会立即隐藏模式而不是显示模式？但当我使用断点运行代码时，它会起作用很好？我的代码中有没有我不知道的异步部分？好的。要理解你做错了什么，请从三个部分考虑你的代码：1）模态显示部分；2）处理部分；3）模态隐藏部分。由于dom的渲染周期（以及处理器的速度），你应该在（2）结束时执行（3）此处的部分可以挂起（1）的渲染周期，因此您可以等待显示对话框，然后启动长任务，或者将长任务放在承诺中（无论如何，在某些浏览器中，您需要延迟执行以允许渲染周期显示对话框）。您可以在此处阅读有关渲染生命周期的更多信息：因此，我确实是对的：modal.style.display在CSS渲染之前不会阻塞。它会继续，并且处理任务会在CSS渲染上进行；这就是为什么它可以与调试断点一起工作，但不会实时工作的原因。是的。调试断点会使所需的延迟停止n每一步。