Delay adding images to div in for loop

Question

I want to add some time between adding the images to the element. This is my code :

    <script>
        var aantalkeergeklikt = 0;
        var uniekeid = 0;
        var pictures = ["../Spel in jQuery/img/bubbles/bom.png", "../Spel in jQuery/img/bubbles/green.png", "../Spel in jQuery/img/bubbles/red.png", "../Spel in jQuery/img/bubbles/yellow.png", "../Spel in jQuery/img/bubbles/orange.png", "../Spel in jQuery/img/bubbles/purple.png", "../Spel in jQuery/img/bubbles/blue.png"];
        var size = pictures.length

        for ( i = 0; i < 20; i++) {
            uniekeid = uniekeid + 1;
            var x = Math.floor(size * Math.random())

            var item = $("<img src='" + pictures[x] + "' alt='" + uniekeid + "' />").hide().delay("slow").fadeIn();
            $('#depionnen').append(item);
            console.log(item.alt);
        }

    </script>

At this point the delay is applied after adding all the images.

Can someone help me with this?

score 0 · Accepted Answer · edited May 23 '17 at 11:58

you have to use a setTimeout to delay a for loop.

var i = 1;                     //  set your counter to 1

function myLoop () {           //  create a loop function
   setTimeout(function () {    //  call a 3s setTimeout when the loop is called
      alert('hello');          //  your code here
      i++;                     //  increment the counter
      if (i < 10) {            //  if the counter < 10, call the loop function
         myLoop();             //  ..  again which will trigger another 
      }                        //  ..  setTimeout()
   }, 3000)
}

myLoop();                      //  start the loop

Source

So in your example it would be something like this:

var i = 1;                     

function myLoop () {           
   setTimeout(function () {    
      uniekeid = uniekeid + 1;
      var x = Math.floor(size * Math.random())
      var item = $("<img src='" + pictures[x] + "' alt='" + uniekeid + "' />").hide().delay("slow").fadeIn();
      $('#depionnen').append(item);
      console.log(item.alt);   

      i++;                     
      if (i < 20) {             
         myLoop();             
      }                        
   }, 3000)
}

myLoop();

Consider accepting the answer so other people know ;) – Bram Apr 04 '15 at 13:20 — Bram, Apr 04 '15 at 13:20

Rick Hitchcock · Answer 2 · 2015-04-04T13:28:08.857

0

Here's a general solution to this type of problem:

function nextPic() {
  if(pictures.length) {
    var item = $('<img src="' + pictures.shift() + '">')
               .hide()
               .delay('slow')
               .fadeIn(nextPic);

    $('#depionnen').append(item);
  }
} //nextPic

nextPic();

Working Fiddle

edited Apr 04 '15 at 13:28

answered Apr 04 '15 at 13:20

Rick Hitchcock

35,202
5
48
79

That is not what he was asking for. He was asking for a delay. Not effects – Bram Apr 04 '15 at 13:21
@BramDriesen, moving **slow** from `delay` to `fadeIn` should accomplish the same thing. Op can respond if this doesn't meet his requirements. – Rick Hitchcock Apr 04 '15 at 13:23
Not really. Take this for example. A page loading 10K pictures with a for loop all at once but with effects !== loading with delay. It might look the same. But it's something different. – Bram Apr 04 '15 at 13:25
1

Sorry, you're absolutely right! I've updated my answer. – Rick Hitchcock Apr 04 '15 at 13:28
One question, so many different answers ;) It's just how you read it – Bram Apr 04 '15 at 13:59

score 0 · Answer 3 · answered Apr 04 '15 at 13:26

jQuery.delay() only delays effects on the same element. Try using setTimeout() instead, which would look something like this:

for ( i = 0; i < 20; i++) {
    uniekeid = uniekeid + 1;
    var x = Math.floor(size * Math.random())

    var item = $("<img src='" + pictures[x] + "' alt='" + uniekeid + "' />").hide();
    $('#depionnen').append(item);

    setTimeout( function(item){ item.fadeIn(); }, i*600, item);
}

Demo: http://jsfiddle.net/5eygxdv1/

Delay adding images to div in for loop

3 Answers3