javascript - 如何同步运行嵌套循环？

Question

我正在编写一个简单的脚本，一次将一个字符打印到屏幕上。

我这样做是为了让函数(我称之为 slowPrint )可以接收字符串数组。数组中的每个元素代表一条消息。

这是我到目前为止的代码:

但是，我没有得到预期的输出。我怀疑这部分是由于代码的异步性质，尽管我对正在发生的事情以及如何修复它没有完全清晰的了解。

首先，<br />标签在任何消息之前打印，这告诉我外层循环在嵌套循环开始之前就已经完成。

但是，当嵌套循环开始时，数组中的每个字符串将相隔一秒打印，但会完整打印而不是逐个字符。

我错过了什么？

此外，有人可以解释一下 setTimeout 的以下行为吗？方法？

场景 1:当我将第二个参数设置为 i * 1000 时，第二个字符串在另一个字符串后一秒打印(同样，整个字符串而不是逐个字符)

     const messages = [
      "all systems are operational",
      "you may proceed"
    ];

    function slowPrint(args) {

      let screen = document.getElementById('screen');

      for (let i = 0; i < args.length; i++) {

        let message = args[i];

        for (let j = 0; j < message.length; j++) {
          setTimeout(function () {
            screen.innerHTML += message[j];
          }, i * 1000);
        }

        screen.innerHTML += '<br />';

      }

    }

    slowPrint(messages)

<div id="screen"></div>

场景 2:当我将第二个参数设置为 j * 1000 时，输出完全出乎意料:每隔一个字符以 2 个为一组打印，但顺序难以理解；只打印最后一个参数的最后一个单词，就像其他所有内容一样。

场景 3:当我将第二个参数设置为 1000 时，一秒后打印数组中的所有字符串。

发生了什么？

Answer 1

该视频是 js 如何在浏览器中工作的最佳解释之一:here

基本上，您在 setTimeout 回调中放入的任何内容都会在您传递给第二个参数的毫秒数内被搁置。然后将其放入回调队列中，直到调用堆栈为空并且它是队列中的下一项

如果您将代码复制并粘贴到 http://latentflip.com/loupe/ 中，您将看到它在幕后的实际运行情况