向 Jquery.each 添加时间延迟答案

【问题标题】：Adding a timing delay to Jquery.each向 Jquery.each 添加时间延迟
【发布时间】：2017-10-29 21:01:54
【问题描述】：

我想通过 jQuery.each 函数运行这个数组，并在每次迭代之间添加一个延迟，在附加到 div 的每个单词之间创建一个暂停。我已经看到使用 setTimeout 回答了其他类似的问题，但我未能成功地将其应用于我的代码。

https://jsfiddle.net/samseurynck/7xw9ujjh/2/

var arr = ["one ", "two ", "three ", "four ", "five "];

function myFunction() {
  jQuery.each(arr, function(index, value) {
    $(".testBox").append('<p class="box">' + value + '</p>');
    console.log('yes');
  });
}

myFunction();

【问题讨论】：

标签： jquery arrays each settimeout delay

【解决方案1】：

您可以创建一个计数器并使用setTimeout() 方法：

var arr = ["one ", "two ", "three ", "four ", "five "];

function myFunction() {
  var count = 0;
  jQuery.each(arr, function(index, value) {

    setTimeout(function() {
      $(".testBox").append('<p class="box">' + value + '</p>');
      console.log('yes');
    }, count * 1000)
    count++;
  });
}

myFunction();

.testbox {
  height: 100%;
  width: 100%;
  position: absolute;
}

p {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testBox">
  <p class="box">

  </p>
</div>

【讨论】：

进一步：是否可以通过循环运行它来运行 myFunction(); 10 倍？
@samseurynck，不客气。我很高兴它有效。我不明白你想要进一步实现的目标。您能否再解释一下，或者根据您现在所拥有的内容制作一个jsfiddle.net 示例？
我想多次运行函数 myFunction()，直到数组中的文本填满整个窗口。我一直在猜测，最好的方法是通过循环运行函数，以便一遍又一遍地附加“一”“二”“三”“四”数组，而 myFunction() 的延迟完好无损.这更有意义吗？
到目前为止我有这个，这不是我想要的，因为数组没有像以前那样按顺序附加。 jsfiddle.net/samseurynck/yk06Lv0g/1
啊，就是这样！再次感谢您。

【解决方案2】：

使用index 增加setTimeout() 的延迟计时器

var arr = ["one ", "two ", "three ", "four ", "five "];

function myFunction() {
  var $box = $(".testBox"),// cache container to avoid dom search each iteration
    delay = 500; //time in ms

  jQuery.each(arr, function(index, value) {
    setTimeout(function() {
      $box.append('<p class="box">' + value + '</p>');
      console.log('yes');
    }, index * delay)

  });
}

myFunction();

fiddle demo

【讨论】：

【解决方案3】：

只需使用索引进行超时。中间有 1 秒的示例：

var arr = ["one ", "two ", "three ", "four ", "five "];

function myFunction() {
  jQuery.each(arr, function(index, value) {
    setTimeout(function(){
        $(".testBox").append('<p class="box">' + value + '</p>');
        console.log('yes');
    }, index*1000)
  });
}

myFunction();

【讨论】：

【解决方案4】：

不添加新变量来计算迭代次数，只需使用index 参数

var arr = ["one ", "two ", "three ", "four ", "five "];

function myFunction() {
 jQuery.each(function(index, value) {
    setTimeout(function() {
      $(".testBox").append('<p class="box">' + value + '</p>');
      console.log('yes');
    }, 1000 * index)
  });
}

myFunction();

【讨论】：