Question

所以我试图使用我的3张图像（3,2,1）创建一个基本的倒计时，但每次之间有2秒的差距。我在那里有一个控制台日志，看看当我执行脚本时他们是否经历过。所以现在我只需要在两者之间留出2秒的差距...那就是我被卡住了。救命？我现在的方式是它等待2秒然后启动整个代码并且不在每个之间等待。

var numImgCont = [];
numImgCont[0] = "./imgs/3.jpg";
numImgCont[1] = "./imgs/2.jpg";
numImgCont[2] = "./imgs/1.jpg";

apples = function(){

    setTimeout(
        function(){
            for (var i = 0; i <= 2; i++) {  
            console.log(numImgCont[i])
            document.getElementById("imgcontainer").src =numImgCont[i]; 
        };

    }, 500);

}

Answer 1

示例（在window.onload元素后面运行onDOMReady或imgcontainer或内联）：

var numImgCont = [];
numImgCont[0] = "http://placehold.it/200x200";
numImgCont[1] = "http://placehold.it/300x300";
numImgCont[2] = "http://placehold.it/400x400";

var apples = (function loop(){
    var container = document.getElementById("imgcontainer");

    if (numImgCont.length) {
        setTimeout(function(){
            container.src = numImgCont.shift();
            loop();
        }, 2000);
    }

    return loop;
})();

http://jsfiddle.net/69RN5/1

方法略有不同：

var numImgCont = [];
numImgCont[0] = "http://placehold.it/200x200";
numImgCont[1] = "http://placehold.it/300x300";
numImgCont[2] = "http://placehold.it/400x400";

var apples = (function run(){
    var container = document.getElementById("imgcontainer");

    return (function loop(){
        setTimeout(function(){
            if (numImgCont.length) {
                container.src = numImgCont.shift();
                loop();
            }
        }, 2000);

        return loop;
    })();

})();

http://jsfiddle.net/69RN5/4

Answer 2

您可以使用IEFE（立即调用的函数表达式）和setTimeout。 Demo

var container = document.getElementById('imgcontainer'),
    images = ['src1', 'src2', 'src3'];

(function show() {
    container.src = images.shift();
    images.length && setTimeout(show, 2000);    
}());

使用图像数组Javascript倒计时

2 个答案: