jQuery和For循环内的setTimeout

Question

jQuery和For循环内的setTimeout

6

我刚遇到了一个非常奇怪的问题（虽然我解决了它），但我想知道为什么会出现这个问题：

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

这样做起效了，但我不知道为什么第一个代码没有起作用。有人能解释一下吗？谢谢！

- Mathspy

我实际上已经检查过了，并根据它更改了我的代码（我的代码最初是在For循环内部调用函数的setTimeout，而不是调用函数的For循环，其中包含一个setTimeout）。 - Mathspy

很有趣。看起来你最初传递了i，应该是可以工作的。你能否在JSFiddle中设置你的HTML？@undefined：这与其他问题不同，因为他将索引作为本地变量传递了。 - iCollect.it Ltd

http://jsfiddle.net/2XhqH/ 中，speech 被定义为全局数组，并且字符串被推送到其中。 - Mathspy

http://jsfiddle.net/2XhqH/1/ 我很抱歉只使用了HTML，因为TrueBlueAussie说他想看到HTML（而且代码很大，分散在许多文件中，因为我正在开发一个简单的游戏引擎）（附注：此代码仅用于演示，实际代码不是这样运行的）。 - Mathspy

1

顺便提一下：请纠正appearance的拼写 - 在代码中拼写很重要（特别是如果您打算在SO上发布它）:) - iCollect.it Ltd

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gone Coding · Accepted Answer

在 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数组。当timeout函数最终被触发时，speech数组为空！