setTimeout在一个for循环内不执行传递给它的函数

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 s的所有在同一时间执行，因为for循环不会等待他们在每个迭代执行。您必须使用诸如50*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>

Answer 2

是不是一个好主意，使在Javascript中，一个循环我有不好的经验与它里面的功能。

此代码做这样应能正常工作：

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

Answer 3

的setTimeout（50ms的延迟之后，你的情况）只运行一次。

为此，你应该使用的setInterval

Answer 4

var text = document.querySelector('.console-effect').textContent; 
var index = 0; 
setInterval(function(){ 
    document.querySelector('.console-effect').textContent = text.substr(0, index); 
    if(index == text.lenght){ 
     clearInterval(this); 
    } 
index++; 
},1000); 

Answer 5

做这样的事情。

function type() { 
    var text = document.querySelector('.console-effect').textContent; 
    document.querySelector('.console-effect').textContent = '';//clear content 
    for (var i = 0; i <= text.length; i++) { 
     setTimeout(function(j) { 
      document.querySelector('.console-effect').textContent += text[j];// or .charAt(j) 
     }, 50 * i, i); 
     // 50 * i sets timeout for each iteration 
     // i (3rd arg) passes to the inner function 
    } 
} 
type(); 

更好的版本。

function type(text) { 
    var textObj = document.querySelector('.console-effect'); 
    for (var i = 0; i <= text.length; i++) { 
     setTimeout(function(ch) { 
      textObj.textContent += ch; 
     }, 50 * i, text[i]); 
     // 50 * i sets timeout for each iteration 
     // i (3rd arg) passes to the inner function 
    } 
} 
type('.console-effect'); 

Answer 6

没有50 * i的解决方案，看看css的效果。你的问题是setTimeout的是异步执行的（即“控制流”不会等待那些50ms的），所以它们与值i = text.length一起发射（如果你的文字足够小）

<p class="console-effect">console effects</p> 
<script> 
function type() { 
     var i=0; 
     var t = document.querySelector('.console-effect').textContent; 
     var fn = setInterval(function() { 
      print_text(++i,t,fn) 
     }, 500); 
} 
function print_text(i,t,fn){ 
    if(i <= t.length){ 
       document.querySelector('.console-effect').textContent = t.substr(0, i) 
    } else clearInterval(fn) 
} 
type(); 

</script> 
<style> 
@-webkit-keyframes blinker { 
    from { opacity: 1.0; } 
    to { opacity: 0.0; } 
} 
.console-effect:after{ 
    content:'_'; 
    text-decoration: blink; 
    -webkit-animation-name: blinker; 
    -webkit-animation-duration: 0.2s; 
    -webkit-animation-iteration-count:infinite; 
    -webkit-animation-timing-function:ease-in-out; 
    -webkit-animation-direction: alternate; 
    } 
</style> 

Answer 7

我不想相信@blex，但他对范围是正确的。他在两点上都是正确的，但封闭让我震惊。我从来没有遇到过这种情况，并被迫在以前解决问题？

因此，这里的想法是，不是在开始时为您的函数安排十几个调用，而只是安排下一次调用。在这之后，它会查看是否需要安排下一个。

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

<span class="console-effect">This is a test</span>