jQuery和setTimeout在For循环中

Question

我刚刚遇到了一个非常奇怪的问题（尽管已解决），但我想知道为什么会首先发生：

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

那确实成功了，但是我不知道为什么第一个代码不起作用。有人可以向我解释吗？谢谢你！

Answer 1

在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数组为空！