4

配列をループしようとしています。ただし、各配列値の間に 15 秒の遅延を追加したいと思います。これにより、値 1 がコンソールに書き込まれ、次に 15 秒カウントダウンされ、値 2 がコンソールに書き込まれます。

これを行う方法が正確にはわかりません。現在の私のコードは、実際のカウントダウンも配列値もなしで、コンソールに15から1までの数字を一度に出力するだけです。

配列

["l3", "l4", "l5", "l6", "l7", "l8", "l9", "l10", "l11", "l12", "l13", "l14", "l15", "l16"]

コード

var adArray = [];
// get links with class adfu
var adfuClass = document.getElementsByClassName('adfu');
for (var i = 0; i < adfuClass.length; i++) {
    var ids = adfuClass[i].id
    var newIds = ids.replace(/tg_/i, "l");
    adArray.push(newIds);
}
// get links with class ad30
var ad30Class = document.getElementsByClassName('ad30');
for (var i = 0; i < ad30Class.length; i++) {
    var ids = ad30Class[i].id;
     var newIds = ids.replace(/tg_/i, "l");
     adArray.push(newIds);
}
// get links with class adf
var adfClass = document.getElementsByClassName('adf');
for (var i = 0; i < adfClass.length; i++) {
    var ids = adfClass[i].id;
     var newIds = ids.replace(/tg_/i, "l");
     adArray.push(newIds);
}
// loop through array with all new ids
for (var i = 0, l = adArray.length; i < l; i++) {
    var counter = 15;
    var countDown = setTimeout(function() {
        console.log(counter);
        if (counter == 0) {
            console.log(adArray[i]);
        }
        counter--;
    }, 1000);
}
4

3 に答える 3

12 
// 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);
    }
})();

このようなもの？

于 2012-06-09T23:24:08.663 に答える
2

このタイプの反復子には、クロージャ スコープを使用してloopカウンタと、反復子looper()を実行するネストされた関数を格納する、非常に単純なパターンがありsetTimeout()ます。このlooper()関数は実際にloopカウントを反復するため、forまたはdo/while構文は必要ありません。私はこのパターンをよく使用しますが、非常にうまく機能します。

編集:ログに記録されたものloop > 1ではなく、チェックする条件を変更しました。これは微調整することができ、技術的には、here は 16 回実行されます。loop > 0Loop count: 0looper()

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

http://jsfiddle.net/userdude/NV7HU/2

于 2012-06-09T23:34:54.417 に答える
1

この関数を使用して、実行を容易にします。

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)

どこ：

  • arrはループする必要がある配列で、jQuery セレクターの可能性があります
  • callbackは、選択されたアイテムである 1 つの引数が返される実行された関数です。
  • timeは遅延に必要なタイムアウトです
  • コードを永遠に繰り返す必要がある場合は、infiniteをtrueまたはfalseに設定します。

animate.cssを使用した例:

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);
于 2015-11-13T21:13:55.823 に答える