Question

我正在尝试做一些非常简单的事情，但它不起作用，我无法弄清楚为什么不这样做。我试图将一些文本写入div，使文本一次出现一个字符;有点像矩阵中的那个场景。

var message = document.getElementById("message");
  function writeMessage(string) {
    message.innerHTML = string.charAt(0);
    for (var i = 1; i < string.length; i++) {
      window.setTimeout(function() {message.innerHTML+=string.charAt(i);},1000);
    }
  }
  writeMessage("Hello world");

要查看我的代码无效，请参阅JSFiddle。如您所知，它只显示第一个字符，就好像setTimeout根本没有执行该函数。

Answer 1

传递给setTimeout的函数实际上在循环完成后执行 i变量在执行时将等于string.length。您可以尝试通过将i存储到临时变量或使用IIFE来解决此问题。但是，您在setTimeout注册的所有函数实例将在大约相同的时间结束执行，因此您将看不到任何动画。

也许尝试使用setInterval，如下所示：

function writeMessage(string) { var i = 0, intervalId; intervalId = window.setInterval(function() { message.innerHTML += string.charAt(i++); if (i > string.length) window.clearInterval(intervalId); }, 100); } writeMessage("Hello world");

Demonstration

Answer 2

function writeMessage(text) {
    message.innerHTML = "";

    for (var i = 0; i < text.length; i++) {
        setTimeout(function (char) {
            return function () { message.innerHTML += char; };
        }(text[i]), i * 1000);
    }
}

使用setTimeout通过char打印字符串char

2 个答案: