Question

我正在编写一个小型应用程序，该应用程序对输入的处理需要花费几秒钟的时间，因此我想将处理过程包装在Modal中，例如

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

    // processing

    modal.style.display = "none";
}

这是JFiddle： https://jsfiddle.net/6mufcet3/4/

根据我的阅读，Javascript是一种同步语言，但是通过一些调试，它看起来像直接跳到for循环而没有显示模式。

此外，如果我在浏览器的开发工具中设置了断点，它似乎可以正常工作。我不是网络开发人员，因此并不真正了解Javascript的执行方式；如果事情正在重新安排，等等。

Answer 1

您应该使用承诺。您执行exec函数的方式会立即隐藏模式。

function execButton() {
  modal = document.getElementById("inModal")
  modal.style.display = "block"

  // Get some time to show the modal
  setTimeout(function() {
    const longTask = new Promise(function(resolve, reject) {
      let out = 0
      for (let i = 0; i <= 1000; i++) {
        out += i
        console.log(i)
      }

      resolve(out)
    })

    longTask.then(function(out) {
      modal.style.display = "none"
    })
  }, 100)
}

var button = document.getElementById("inButton")
button.onclick = execButton

.modal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.3);
}

<button id="inButton" type="button" class="button">Open</button>
<div id="inModal" class="modal">
  Modal
</div>

在该示例中，我将长任务放在setTimeout函数中，因为该代码段需要一些时间来刷新DOM。

在模态中包装处理任务不起作用

1 个答案: