javascript - How to slow down a loop with setTimeout or setInterval - Stack Overflow

admin管理员组

文章数量:1328797

I have an array called RotatorNames. It contains random things but let's just say that it contains ["rotatorA","rotatorB","rotatorC"].

I want to loop through the array, and for each item i want to trigger a click event. I have got some of this working, except that the everything get's triggered instantly. How can i force the loop to wait a few seconds before it continues looping.

Here's what i have.

function Rotator() {
    var RotatorNames = ["rotatorA","rotatorB","rotatorC"];
    RotatorNames.forEach(function(entry){
        window.setTimeout(function() {
            //Trigger that elements button.
            var elemntBtn = $('#btn_' + entry);
            elemntBtn.trigger('click');
        }, 5000);
    });
}

You can run this to see what my issue is. / Also, sometimes the alerts do A,C,B instead of A,B,C.

I have an array called RotatorNames. It contains random things but let's just say that it contains ["rotatorA","rotatorB","rotatorC"].

I want to loop through the array, and for each item i want to trigger a click event. I have got some of this working, except that the everything get's triggered instantly. How can i force the loop to wait a few seconds before it continues looping.

Here's what i have.

function Rotator() {
    var RotatorNames = ["rotatorA","rotatorB","rotatorC"];
    RotatorNames.forEach(function(entry){
        window.setTimeout(function() {
            //Trigger that elements button.
            var elemntBtn = $('#btn_' + entry);
            elemntBtn.trigger('click');
        }, 5000);
    });
}

You can run this to see what my issue is. http://jsfiddle/BxDtp/ Also, sometimes the alerts do A,C,B instead of A,B,C.

• javascript
• jquery
• foreach
• settimeout
• setinterval

Share Improve this question Follow edited May 21, 2013 at 14:41 user1823761 asked May 21, 2013 at 14:29 ipixelipixel 52988 silver badges2121 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

While I'm sure the other answers work, I would prefer using this setup:

function rotator(arr) {
    var iterator = function (index) {
        if (index >= arr.length) {
            index = 0;
        }
        console.log(arr[index]);
        setTimeout(function () {
            iterator(++index);
        }, 1500);
    };

    iterator(0);
};

rotator(["rotatorA", "rotatorB", "rotatorC"]);

DEMO: http://jsfiddle/BxDtp/4/

It just seems more logical to me than trying to get the iterations to line up correctly by passing the "correct" value to setTimeout.

This allows for the array to be continually iterated over, in order. If you want it to stop after going through it once, change index = 0; to return;.

You can increase the timeout based on the current index:

RotatorNames.forEach(function(entry, i) {
    window.setTimeout(function() {
        //Trigger that elements button.
        var elemntBtn = $('#btn_' + entry);
        elemntBtn.trigger('click');
    }, 5000 + (i * 1000)); // wait for 5 seconds + 1 more per element
});

Try:

var idx = 0;
function Rotator() {
    var RotatorNames = ["rotatorA", "rotatorB", "rotatorC"];
        setTimeout(function () {
            console.log(RotatorNames[idx]);
            idx = (idx<RotatorNames.length-1) ? idx+1:idx=0;
            Rotator();
        }, 5000);
}
Rotator();

jsFiddle example

(note that I used console.log instead of alert)

Something like this should do what you're after:

function Rotator(index){
  var RotatorNames = ["rotatorA","rotatorB","rotatorC"];
  index = (index === undefined ? 0 : index);

  var $btn = $("#btn_"+RotatorNames[index]);
  $btn.click();

  if(RotatorNames[index+1]!==undefined){
    window.setTimeout(function(){
      Rotator(index+1);
    }, 500);
  }
}

本文标签： javascriptHow to slow down a loop with setTimeout or setIntervalStack Overflow