logo标签列表

JavaScript：延迟循环遍历数组

javascriptarrays
11

我想循环遍历一个数组，但是希望每个数组的值都有延迟输出。这是我目前对它应该如何工作的理解：

编辑

请求的JS Fiddle：http://jsfiddle.net/d3whkjww/

    loopThroughSplittedText: function(splittedText) {

        for (var i = 0; i < splittedText.length; i++) {
            // for each iteration console.log a word
            // and make a pause after it
            setTimeout(
                console.log(splittedText[i]),
                1000
            );
        };

    },

然而，它并没有起作用，我认为这可能是因为"for"循环中的参数必须在setTimeout函数内部。但我不知道怎样使它起作用。

现在我得到的是数组的每个值都一次性出现，但我希望它们能够延迟显示。我该怎么做？

你能提供一个Fiddle给我们吗，这样人们就可以用你的数据进行测试了吗？ - YaBCK
你需要增加超时的“duration”。 - Daniel A. White
@Jamiec：我认为重复的问题应该是关于在提供的代码中使用setTimeout的问题，但似乎OP立即调用而不是将函数作为第一个参数传递。 - Qantas 94 Heavy
我已经查看了您的Fiddle，并为您使用您的数组制作了一个示例。在我的示例中，它将向您展示如何使用计时器创建数组。这很好，因为您可以在代码的其他部分中使用计时器，而无需不断输入代码。 - YaBCK
13个回答
1

这也能够工作

 function loopThroughSplittedText(splittedText) {

        for (var i=0; i < splittedText.length;i++) {
            (function(ind, text) {
                setTimeout(function(){console.log(text);}, 1000 + (1000 * ind));
        })(i, splittedText[i]);
    }

 }
1
另一个示例：

var split = 'Lorem ipsum dolor'.split(' ');

var loop = function() {
  console.log(split[0]);
  split = split.slice(1);

  if (split.length > 0) {
    setTimeout(function() {
      loop();
    }, 1000);
  }
}

loop();
0

你可以通过三种方式实现

1. closure
2. Recursive
3. variable declaration using let

var data = ['a', 'b', 'c', 'd'];

闭包：

for(i=0; i<=data.length; i++) {
  (function(x) {
    setTimeout(() => {
       console.log(x);
    }, 1000)
  })(data[i]);
 }

变量声明

for(const ind of data) {
 let local = ind;
 setTimeout(() => {
    console.log(local);
 }, 1000)
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接