如何在while循環中延遲jquery中的一組指令

Question

我試圖在屏幕上一次顯示三張圖片。 我將圖片的來源保存在一個數組中，我將繼續從該數組中拍攝三張圖片，將它們從數組中刪除，在屏幕上顯示一段時間，然后將其替換為下一組3張圖片直到我的圖片用完為止。

我不知道是什么問題。

我在這里復制了代碼：

的JavaScript

    $(document).ready(function () {
    $('#start').click(function () {
        "use strict";
        $(this).fadeOut(400);
        $('#start').remove();
        var $arrayOfPicSrc = ["p1.jpg", "p2.jpg", "p3.jpg", "p1.jpg", "p2.jpg", "p3.jpg"];
        var randomNumber;
        var $picturesToPrint;
        var i;
        while ($arrayOfPicSrc.length > 0) {
            $picturesToPrint = [];
            for (i = 0; i < 3; i = i + 1) {
                randomNumber = Math.ceil(Math.random() * $arrayOfPicSrc.length) - 1;
                $picturesToPrint.push($arrayOfPicSrc[randomNumber]);
                $arrayOfPicSrc.splice(randomNumber, 1);
            }
            for (i = 0; i < 3; i = i + 1) {
                $('body').append("<img class='toRemove' src=" + $picturesToPrint[i] + " height='100px' width='100'>");
            }
            $('.toRemove').delay(3000).fadeOut('slow', function () {
                $('.toRemove').remove();
            });
            $picturesToPrint.splice(0, 3);
        }
    });
});

這是我寫的JS和HTML的鏈接： http : //jsfiddle.net/7Lgpx/

Answer 1

沒有任何延遲會使WHILE循環中的FOR循環立即執行，因此所有圖像都將立即附加，然后在延遲3秒后消失。 delay（3000）不會像同步編碼那樣延遲。 它只會延遲隊列中緊隨其后的下一個項目（fadeOut）。

看一下setTimeout和setInterval函數。 使用setInterval您可以每x秒更換一次照片。

更新的小提琴，我認為您可以嘗試這樣做：

http://jsfiddle.net/Khj8m/