Question

我完全不知道发生了什么事。但是当我尝试迭代这个时，使用第12行的[i]，它不起作用，我得到了我想写的跨度完全空白。但是，在没有改变任何其他情况的情况下，例如，只在第12行切换[i]到[0]，我按照预期编写了我的跨度！

有什么想法吗？

$(function() {  
    var listaCoisas = [
        "disruptiva",
        "matadora",
        "feroz",
        "tradicional"
    ];

    var i;
    for (i=0; i<listaCoisas.length; i++){
        setTimeout(function(){
            $('#word-attribute').empty().append(listaCoisas[3]);
        },1000);
    }
});

Answer 1

如果您希望每次迭代在前一次迭代后1秒，则需要更改setTimeout延迟 - 使用forEach

listaCoisas.forEach(function(entry, i){ 
    setTimeout(function(){ 
        $('#word-attribute').empty().append(entry); 
    },(i+1) * 1000); 
});

Answer 2

上面的答案在替换代码中的for循环时效果很好，但单独添加交错延迟不会使原始代码在上面工作，我认为理解原因很重要。

由于closures，在调用第一个setTimeout时，for循环已经运行，i的值将比数组中的最后一项多一个（第四个索引））。这意味着什么都不会附加到#word-attribute，因为它会尝试追加一个不存在的项目。如果您打开控制台here，则可以看到问题。

如果你想保持for循环超过添加延迟的setTimeouts，你可以做几件事：

如果您正在使用像Babel这样的东西编译您的javascript，那么您可以利用ES6 let关键字，它带有自己的闭包。对let使用var代替i。 Example
使用匿名函数在i变量周围创建另一个闭包，我们将在匿名函数中调用x。然后，setTimeout在调用时可以访问正确的i值。 Example

数组索引不适用于for循环

2 个答案: