在 for 循环中延迟将图像添加到 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/

在 for 循环中延迟将图像添加到 div

Delay adding images to div in for loop

jquery

image

delay