javascript - for 循环内的 setTimeout 不执行传递给它的函数

Question

我正在尝试用 js 制作“控制台打字效果”，在下一个函数中，我获取元素的文本，然后使用“for”循环来切片该文本并延迟粘贴到其中.

在 chrome 中调试代码后，我可以看到 javascript 没有运行 setTimeout...它只是忽略它。

function type() {
    var text = document.querySelector('.console-effect').textContent;
    for (var i = 0; i <= text.length; i++) {
        setTimeout(function() {
            document.querySelector('.console-effect').textContent = text.substr(0, i)
        }, 50);
    }
}
type();

Answer 1

您的 setTimeout 全部同时执行，因为 for 循环不会等待它们在每次迭代中执行。您必须使用 50*i 等值来延迟每次超时。

然后，为了在这种情况下保留 i 的值，您需要使用闭包。否则，当超时结束时，循环将结束，并且 i 将成为所有超时的最终值。

var text = document.querySelector('.console-effect').textContent;

for (var i = 0; i <= text.length; i++) {
  (function(i) {  
    setTimeout(function() {
      document.querySelector('.console-effect').textContent = text.substr(0, i);
    }, 50*i);
  })(i);
}

body{background: #333;}
.console-effect{color: #0f0; font-family: monospace; font-size: 2em;}

<div class="console-effect">This is some example text</div>