jQuery and setTimeout inside For loop

jQuery and setTimeout inside For loop

本文关键字：For loop inside setTimeout and jQuery      更新时间：2023-09-26

我刚刚遇到了一个非常奇怪的问题（不过我修复了它），但我想知道为什么首先会发生这种情况：

function stuffAppear() {
    var i;
    for (i = 0; i < speech.length; i++) {
        apperance(i);
    }
}
function apperance(i) {
    var x = speech[i];
    setTimeout(function() {$(speech[i]).fadeIn(1000); console.log(i);}, 1000 + i * 1500);
    console.log(speech[i]);
}

控制台日志显示"#yo0"然后"#ma0b"（这是必需的），但同时，它们从未淡入

我

玩了一下代码，直到我达到这个：

function stuffAppear() {
    var i;
    for (i = 0; i < speech.length; i++) {
        apperance(i);
    }
}
function apperance(i) {
    var x = speech[i];
    setTimeout(function() {$(x).fadeIn(1000); console.log(i);}, 1000 + i * 1500);
}

这确实起到了作用，但我不知道为什么第一段代码不起作用。有人可以向我解释一下吗？谢谢！

在JSFiddle中，两个版本都可以正常工作（并且相同）：

第一：http://jsfiddle.net/TrueBlueAussie/Bkz55/3/

var speech = ["#yo0", "#ma0b", "#blah"];
function stuffAppear() {
    var i;
    for (i = 0; i < speech.length; i++) {
        apperance(i);
    }
}
function apperance(i) {
    var x = speech[i];
    setTimeout(function() {$(speech[i]).fadeIn(1000); console.log(i);}, 1000 + i * 1500);
    console.log(speech[i]);  // <<< THIS WOULD OCCUR IMMEDIATELY
}

第二：http://jsfiddle.net/TrueBlueAussie/Bkz55/4/

var speech = ["#yo0", "#ma0b", "#blah"];
function stuffAppear() {
    var i;
    for (i = 0; i < speech.length; i++) {
        apperance(i);
    }
}
function apperance(i) {
    var x = speech[i];
    setTimeout(function() {$(x).fadeIn(1000); console.log(i);}, 1000 + i * 1500);
}

所以我怀疑你所看到的是你的其他代码的副作用（未显示）。

唯一奇怪的是您在第一个版本中登录了两次（一次是在开始时显示的 setTimeout 之外 - 正如您提到的）

跟进：

现在看到了真正的代码，原因是在超时期间speech数组发生了变化。当超时功能最终被击中时，speech数组为空！

相关文章：