For循环中的jQuery和setTimeout [重复]答案

【问题标题】：jQuery and setTimeout inside For loop [duplicate]For循环中的jQuery和setTimeout [重复]
【发布时间】：2014-05-18 11:15:46
【问题描述】：

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

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

这样就成功了，但我不知道为什么第一个代码不起作用。有人可以向我解释一下吗？谢谢！

【问题讨论】：

我实际上已经检查过了。并根据它更改了我的代码（我的代码最初是调用函数的 For 循环内的 setTimeout，而不是调用函数的 For 循环，该函数内部是 setTimeout
令人着迷。看起来它应该像你最初通过 i 一样工作。你能用你的 HTML 设置一个 JSFiddle 吗？ @undefined：这与其他问题不同，因为他将索引作为本地变量传递。
jsfiddle.net/2XhqH 语音被定义为一个全局数组，字符串被推送到它
jsfiddle.net/2XhqH/1 我很抱歉我使用 HTML 只是因为 TrueBlueAussie 说他想查看 HTML（而且代码很大并且在很多文件之间划分，因为我正在创建一个简单的游戏引擎）（PS：此代码仅用于演示，实际代码中不会这样做）
顺便说一句：请更正appearance - 拼写在代码中也很重要（特别是如果您要在 SO 上发布它）:)

标签： javascript jquery for-loop settimeout

【解决方案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 数组为空！

【讨论】：

非常感谢！我想向您展示完整的代码，以便您能告诉我为什么它不起作用，如果您同意，我将使用您网站上的联系我们部分。
消息发送成功！
你发现什么了吗？