Using setTimeout in a Loop

Question

function showColors() {
  $.each(colorList, function(value) {
    setTimeout(function(){
      revealColor(colorList[value]);
    }, 1000);
  });
}

I'm basically trying to set things up here so the revealColor function runs every 1000 milliseconds until I hit the end of the entire colorList array. Unfortunately, it queues up all the setTimeout events instantly and then 1000 milliseconds later, the revealColor function runs once for every value in the array.

I'm sure there's an easier way to do this that I'm just not seeing. Any help would be great!

akinuri · Accepted Answer · 2015-09-13 03:05:11Z

4

Using pure JS:

var colorList = ["red", "green", "blue"];

var colorIndex = 0;

var handler = setInterval(function() {
    revealColor(colorList[colorIndex]);
    colorIndex++;
    if (colorIndex >= colorList.length) {
        clearInterval(handler);
    }
}, 1000);

function revealColor(color) {
    document.body.style.background = color;
}

Using jQuery:

var colorList = ["red", "green", "blue"];

var delay = 1000;

$.each(colorList, function (value) {
    setTimeout(function () {
        revealColor(colorList[value]);
    }, delay);
    delay += 1000;
});

function revealColor(color) {
    document.body.style.background = color;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

edited Sep 13, 2015 at 3:05

answered Sep 13, 2015 at 2:59

akinuri

12.3k10 gold badges75 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Danny Peck Over a year ago

This is perfect! Increasing the delay in every pass of the loop allows it to have the desired behavior. Thanks!

Collectives™ on Stack Overflow

Using setTimeout in a Loop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related