Adding a timing delay to Jquery.each

Question

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.

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

Ionut Necula · Accepted Answer · 2017-05-29 14:06:49Z

4

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

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>

answered May 29, 2017 at 14:06

Ionut Necula

11.6k4 gold badges49 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

samseurynck Over a year ago

Further: would it be possible to then run this through a loop to run myFunction(); 10x?

Ionut Necula Over a year ago

@samseurynck, you're welcome. I'm glad it works. I don't understand the what you're trying to achieve further. Can you please explain a bit more or make an jsfiddle.net example based on what you have now?

samseurynck Over a year ago

I would like to run the function, myFunction(), multiple times until the text from the array fills up the entire window. I have been guessing that the best way to do that is to run the function through a loop, so that the "one" "two" "three" "four" array is appended over and over again, with delay from myFunction() intact. Does that make more sense?

samseurynck Over a year ago

So far I have this, which isn't exactly what I want since the array is not appending in order like it was before. jsfiddle.net/samseurynck/yk06Lv0g/1

samseurynck Over a year ago

Ah, that's it! Thank you again.

|

charlietfl · Accepted Answer · 2017-05-29 14:07:24Z

Use the index to increment the delay timer for 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

Slim · Accepted Answer · 2017-05-29 14:07:38Z

0

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

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

answered May 29, 2017 at 14:07

Slim

1,9641 gold badge12 silver badges20 bronze badges

Comments

WilomGfx · Accepted Answer · 2017-05-29 14:11:12Z

0

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

answered May 29, 2017 at 14:11

WilomGfx

2,0221 gold badge20 silver badges28 bronze badges

Collectives™ on Stack Overflow

Adding a timing delay to Jquery.each

4 Answers 4

8 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

Comments

Comments

Comments

Related