Javascript for循环中的setTimeout不执行传递给它的函数

我试图用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();

函数类型（）{
var text=document.querySelector（'.console effect'）.textContent；
因为（var i=0；i在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();

函数类型（）{
var text=document.querySelector（'.console effect'）.textContent；
var loopFunc=函数（i）{
返回函数（）{
document.querySelector（'.console effect'）.textContent=text.substr（0，i）
};
};
因为（var i=0；i在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();

函数类型（）{
var text=document.querySelector（'.console effect'）.textContent；
var loopFunc=函数（i）{
返回函数（）{
document.querySelector（'.console effect'）.textContent=text.substr（0，i）
};
};
对于（var i=0；isetTimeout）只运行一次（在您的情况下，延迟50ms后）

为此，您应该使用setInterval
setTimeout仅运行一次（在您的情况下，延迟50毫秒后）

为此，您应该使用setInterval
您的
setTimeout
都是同时执行的，因为
For
循环不会等待它们在每次迭代中执行。您必须使用
50*i
等值延迟每个超时

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


var text=document.querySelector（'.console effect'）.textContent；
for（var i=0；i您的
setTimeout
s都是同时执行的，因为
for
循环不会等待它们在每次迭代中执行。您必须使用
50*i
等值延迟每个超时

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


var text=document.querySelector（'.console effect'）.textContent；
对于（var i=0；i做这样的事情

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();

函数类型（）{
var text=document.querySelector（'.console effect'）.textContent；
document.querySelector（'.console effect'）。textContent=''；//清除内容
对于（var i=0；i做这样的事情

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();

函数类型（）{
var text=document.querySelector（'.console effect'）.textContent；
document.querySelector（'.console effect'）。textContent=''；//清除内容
对于（var i=0；i一个没有50*i的解决方案，也可以看看css效果。您的问题是setTimeout是异步执行的（“控制流”不等待这50毫秒），因此它们都与值i=text.length一起触发（如果您的文本足够小）

控制台效果

函数类型（）{
var i=0；
var t=document.querySelector（'.console effect'）.textContent；
var fn=setInterval（函数（）{
打印文本（++i，t，fn）
}, 500);
}
函数打印文本（i、t、fn）{
如果（i一个没有50*i的解决方案，也看看css效果。你的问题是setTimeout是异步执行的（“控制流”不等待这50毫秒），所以它们都会与值i=text.length一起触发（如果你的文本足够小）

控制台效果

函数类型（）{
var i=0；
var t=document.querySelector（'.console effect'）.textContent；
var fn=setInterval（函数（）{
打印文本（++i，t，fn）
}, 500);
}
函数打印文本（i、t、fn）{
如果（我我不想相信@blex，但他关于范围的看法是正确的。他在两个方面都是正确的，但这个结论让我震惊。我怎么从来没有遇到过这样的情况，以前我怎么会被迫困惑自己的出路呢

这里的想法是，不要在一开始就安排对函数的十几个调用，而是只安排下一个调用。在调用该调用后，它会查看是否需要安排下一个调用


函数类型（）{
var text=document.querySelector（'.console effect'）.textContent；
var i=0；
var typeNext=函数（）{
++一,；
document.querySelector（'.console effect'）.textContent=text.substr（0，i）；
如果（i

这是一个测试
我不想相信@blex，但他在范围上是正确的。他在两个方面都是正确的，但这个结论让我震惊。我怎么从来没有遇到过这样的情况，以前我怎么会被强迫去寻找出路呢

这里的想法是，不要在一开始就安排对函数的十几个调用，而是只安排下一个调用。在调用该调用后，它会查看是否需要安排下一个调用


函数类型（）{
var text=document.querySelector（'.console effect'）.textContent；
var i=0；
var typeNext=函数（）{
++一,；
document.querySelector（'.console effect'）.textContent=text.substr（0，i）；
如果（i

这是一个测试
你所说的“它只是忽略”setTimeout是什么意思？你把
<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>