Javascript 在阵列上循环，但有时间延迟

我试图在数组上循环。但是，我想在每个数组值之间添加15秒的延迟。这会将值1写入控制台，然后倒计时15秒，并将值2写入控制台，依此类推

我不知道该怎么做。到目前为止，我的代码只在控制台上一次性输出数字15到1，没有实际的倒计时，也没有数组值

排列

代码

var adArray=[]；
//获取与adfu类的链接
var adfuClass=document.getElementsByClassName（'adfu'）；
对于（变量i=0；i

//使用所有新ID在数组中循环
变量i=0，l=adArray.length；
（函数迭代器（）{
console.log（adArray[i]）；
如果（++i对于这种类型的迭代器有一个非常简单的模式，使用闭包作用域来存储
循环
计数器和一个嵌套的
looper（）
函数，该函数运行
setTimeout（）
迭代器

函数实际上迭代了

循环

计数，因此在构建时不需要

for

或

do

/

。我经常使用这种模式，效果非常好

编辑：修改条件以检查
循环>1
，而不是
循环>0
，它记录了
循环计数：0
。这可以调整，从技术上讲，
循环器（）在这里运行16次

(function(){
    var loop = 15;

    var looper = function(){
        console.log('Loop count: ' + loop);

        if (loop > 1) {
            loop--;
        } else {
            console.log('Loop end.');
            return;
        }

        setTimeout(looper, 15000);
    };

    looper();
})();

使用此功能使其更易于运行：

function loopArr(arr, callback, time, infinite){
    console.log('loop run');
    var i=0,
        total=arr.length-1;
    var loop=function(){
            // RUN CODE
            console.log('loop arr['+i+']');
            callback( arr[i] );
            if (i < total ) {
                i++;
            } else { // LOOP END
                console.log('loop end!');
                if(!infinite) return;
                i=0 //restart
            }
            setTimeout( loop, time);
    }
    loop()
}

其中：


arr是我们需要循环的数组，它可以是jQuery选择器
回调是执行的函数，返回一个参数，即所选项
时间是延迟所需的超时时间

无限设置为真或假，如果我们需要代码永远重复自身


示例使用：

看看我做的这把小提琴中的
wait（）
函数：它实际上是一种模式，
setTimeout（）
本身就是迭代器，而不是
for
或
while
循环。就我个人而言，我喜欢使用
setInterval
（vs.
setTimeout
）和队列（vs.indexer），但…想法相同。@pst-
setInterval（）
可以工作，但对我来说，这些类型循环的迭代自调用
setTimeout（）
的文字性是最直接、最简单的方法。这可能是我最喜欢的模式之一，因为它实用且简单。首先，你从不调用
倒计时（）
，那么它在哪里/如何运行呢？对于
循环，您真的不需要
；如果您适当地使用作用域，您可以使
setTimeout（）
成为迭代器。例如，将其全部封装在闭包或函数作用域中，包括一个嵌套函数来调用
setTimeout（）
和父闭包作用域中的
var循环
，该循环在
setTimeout（）内交互
-包含函数。@ddlshack啊！这是我试图完成的，但有一个小问题。控制台显示数组的长度。我如何在数组中实际显示值检查我的更新。它将记录adArray的值。你想记录什么？很好，这正是我需要的。
参数。被调用方
是ECMAScript第5版中已弃用。相反，函数名应该是自引用的：
（例如，函数进程（）{…；setTimeout（进程，…；}）
。（函数名范围在ECMAScript第3版中定义。）你可以使用arguments.callee引用当前正在执行的函数。他想要15秒的延迟，而不是1秒的延迟。他也不想让它从1到15计数。他想要迭代adArray。这些都是细节。模式很容易调整，我想指出你的答案是我建议的全球化版本。这是pattern这很重要，因此如果您没有建设性的批评，请停止截取我的答案。
：）
@ddlshack给您留下了关于
参数的评论。被调用方
以及引用函数的更好方法：-）
// loop through array with all new ids
var i = 0, l = adArray.length;
(function iterator() {
    console.log(adArray[i]);

    if(++i<l) {
        setTimeout(iterator, 15000);
    }
})();

(function(){
    var loop = 15;

    var looper = function(){
        console.log('Loop count: ' + loop);

        if (loop > 1) {
            loop--;
        } else {
            console.log('Loop end.');
            return;
        }

        setTimeout(looper, 15000);
    };

    looper();
})();

function loopArr(arr, callback, time, infinite){
    console.log('loop run');
    var i=0,
        total=arr.length-1;
    var loop=function(){
            // RUN CODE
            console.log('loop arr['+i+']');
            callback( arr[i] );
            if (i < total ) {
                i++;
            } else { // LOOP END
                console.log('loop end!');
                if(!infinite) return;
                i=0 //restart
            }
            setTimeout( loop, time);
    }
    loop()
}

loopArr(arr, callback, time, infinite)

var imgShowHide = function(elm){
    var elm = $(elm); // select the item arr[i] via jQuery
    elm.css('animation-duration','2s').show()
        .addClass('animated bounceInRight')
        .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
            elm.removeClass('animated bounceInRight')
                .addClass('animated bounceInLeft')
                .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
                    elm.removeClass('animated bounceInLeft').hide()
                })
        });
}

// RUN
loopArr( $('#images > img'), imgShowHide, 4000, true);