Задержка добавления изображений в div для цикла

Question

Я хочу добавить некоторое время между добавлением изображений в элемент. Это мой код:

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

В этот момент задержка применяется после добавления всех изображений.

Может кто-нибудь помочь мне с этим?

Answer 1

вы должны использовать setTimeout для задержки цикла for.

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

Таким образом, в вашем примере это будет что-то вроде этого:

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

Answer 2

Вот общее решение такого рода проблемы:

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

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

nextPic(); 

Working Fiddle

Answer 3

jQuery.delay() только задерживает эффекты на одном элементе. Попробуйте использовать setTimeout() вместо, который будет выглядеть примерно так:

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

Демо: http://jsfiddle.net/5eygxdv1/