Javascript：带延迟的循环数组

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

编辑

请求的JS小提琴：

loopThroughSplittedText:函数（splittedText）{
对于（var i=0；i

但是，它不起作用，我相信它可能起作用，因为“for”循环中的参数必须在setTimeout函数中。但我不知道如何让它工作

---

我得到的只是数组的每一个值，但我希望它们能够延迟出现。如何做到这一点？

代码的一个问题是

I

对于所有回调都是通用的。因此，第一个回调被告知“在索引

i

处输出条目”，但是当它开始执行初始循环时，初始循环已经完成，因此

i

现在位于文本的末尾

---

实现所需功能的一种方法是不使用

for

循环，而是使用一个函数（1）打印字符，（2）更新计数器/位置，以及（3）根据需要安排下一个字符：

loopThroughSplitText: function (text) {
    var i = 0;
    function printEntry() {
        console.log(text[i]);
        i++; // Increment the position
        if (i < text.length) { // If there are more chars, schedule another
            setTimeout(printEntry, 1000);
        }
    }
    printEntry(); // Print the first entry/char
}

loopthroughsplitext:函数（文本）{
var i=0；
函数printEntry（）{
console.log（文本[i]）；
i++；//增加位置
如果（i

好的，因为它不是一个精确的副本，所以您需要增加循环中的延迟，同时从c

var obj={
loopThroughSplittedText:函数（拆分文本）{
forEach（函数（text，i）{
setTimeout（函数（）{
document.getElementById（'x'）。innerHTML+=text
}，i*1000）
})
}
}
obj.loopThroughSplittedText（'abcde'.split（''））

---

递归函数调用可以完成以下任务：

var a = [
    1,2,3,4,5,6,7,8,9,10
    ];

function log(i){
    console.log(a[i]);
    if (i<a.length){
       setTimeout(function(){
           i++;
           log(i);
       },1000);
    }
}

log(0);

var a=[
1,2,3,4,5,6,7,8,9,10
];
功能日志（一）{
console.log（a[i]）；
如果（i
还有一个解决方案，具有设置间隔：

var i = 0;
var intv = setInterval(function() {
    if (i >= splittedText.length) {
        clearInterval(intv);
    } else {
        console.log(splittedText[i]);
        ++i;
    }
}, 1000);

这里有几个问题

setTimeout
应该接受函数，而不是调用函数的结果
setTimeout
会立即返回，因此循环中的所有操作都将在大致相同的时刻开始，并且在执行之前都要等待1000毫秒（尽管上面有注释，这意味着它们都是在同一时刻执行的）
对于每次迭代，
i
的值都将等于
splittedText.length
，因为没有将循环控制变量包装在闭包中
您需要做的是等待执行
setTimeout
指令，然后再继续循环的下一次迭代

例如：

var splittedText = ["Hello", "World", "How", "Are", "You", "Today"];

function loopThroughSplittedText(splittedText) {
    displayValue(splittedText,0);
}

function displayValue(arr, i){
    if(i<arr.length){
        setTimeout(function(){
            document.getElementById('text').innerHTML = arr[i];
            console.log(arr[i])
            displayValue(arr,i+1);
        },1000)
    }
}

loopThroughSplittedText(splittedText)

var splittedText=[“你好”、“世界”、“你好”、“你”、“今天”]；
函数loopThroughSplittedText（splittedText）{
显示值（拆分文本，0）；
}
函数显示值（arr，i）{
如果（i
这也会起作用

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

 }

函数loopThroughSplittedText（splittedText）{
for（var i=0；i
var splittedText=[“你好”、“世界”、“你好”、“你”、“今天”]；
函数loopThroughSplittedText（splittedText）{
对于（var i=0；i

在我的示例中，它将向您展示如何在数组中有争议地循环，直到停止。这只是为了让您了解如何进行延迟。它还将向您展示值实际显示的时间

我想说的是，您实际上可以从这个计时器创建一个很好的实用程序，并将其用于多种用途，通过该实用程序，它将阻止您重复大量代码

JavaScript循环示例：


var body=document.body；
var splittedText=[“你好”、“世界”、“你好”、“你”、“今天”]；
loopthroughray（拆分文本、函数（arrayElement、loopTime）{
body.innerHTML+=arrayElement+“：“+loopTime+”
”；
}, 1000);
函数loopthroughray（数组、回调、间隔）{
var newLoopTimer=新的LoopTimer（函数（时间）{
var元素=array.shift（）；
回调（元素，时间-开始）；
array.push（元素）；
}，间隔）；
var start=newLoopTimer.start（）；
};
//计时器
函数LoopTimer（渲染，间隔）{
var超时；
var上次；
this.start=startOOP；
this.stop=stopLoop；
//起动回路
函数startoop（）{
超时=设置超时（createLoop，0）；
lastTime=Date.now（）；
上次返回；
}
//停止循环
函数stopLoop（）{
clearTimeout（超时）；
上次返回；
}
//实际循环
函数createLoop（）{
var thisttime=Date.now（）；
var loopTime=ThistTime-lastTime；
var延迟=数学最大值（间隔-循环时间，0）；
超时=设置超时（createLoop，延迟）；
lastTime=此时间+延迟；
渲染（这次）；
}
}
提出了问题的另一种解决方案，即使用第三个参数来设置超时时间，该参数仅支持
var splittedText = ["Hello", "World", "How", "Are", "You", "Today"];

function loopThroughSplittedText(splittedText) {
    displayValue(splittedText,0);
}

function displayValue(arr, i){
    if(i<arr.length){
        setTimeout(function(){
            document.getElementById('text').innerHTML = arr[i];
            console.log(arr[i])
            displayValue(arr,i+1);
        },1000)
    }
}

loopThroughSplittedText(splittedText)

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

 }

var splittedText = ["Hello", "World", "How", "Are", "You", "Today"];

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

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

loopThroughSplittedText: function(splittedText) {

  // Create our counter; delayedOutput will use this to
  // track how far along in our string we are currently at
  var locationInString = 0;

  function delayedOutput() {

    // Output the next letter in our string
    console.log(splittedText[locationInString]);

    // Increment our counter so that on the next call we are on the next letter
    locationInString++;

    // Only perform setTimeout if we still have text left to output
    if (locationInString < splittedText.length) {

      // Functions can reference themselves using their own name
      setTimeout(delayedOutput, 1000);
    }
  }

  // Call our function once to get things started
  delayedOutput(); 
},

loopThroughSplittedText: function(splittedText) {

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

},

function loopThroughSplittedText(splittedText) {
    var splittedText = ["Hello", "World", "How", "Are", "You", "Today"];
    for (var i = 0; i < splittedText.length; i++) {
        // for each iteration console.log a word
        // and make a pause after it
    (function(_i) {
        setTimeout(function() {
        window.document.getElementById('text').innerHTML = splittedText[_i];
        console.log(splittedText[_i]);
      }, 1000)
    }(i));

    }
}

loopThroughSplittedText()

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

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