向Jquery.each添加定时延迟

I'd like to run this array through the jQuery.each function and add a delay in-between each iteration, creating a pause in between each word appending to the div. I've seen other similar questions answered using setTimeout but I have been unsuccessful applying that to my code.

我想通过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();

4 个解决方案

#1

You can create a counter and use setTimeout() method:

您可以创建一个计数器并使用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>

#2

Use the index to increment the delay timer for setTimeout()

使用索引递增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

Just use the index for the timeout. Example with 1 second in between:

只需使用索引进行超时。中间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

Without adding a new variable to count the iteration, just use the index param

如果不添加新变量来计算迭代次数,只需使用索引参数

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

#1