CODEWITHSUNDEEP
javascriptjquery
ctrlmaniac
ctrlmaniac

Reputation: 444

How to start over again a loop?

I have a JSON file which stores an array of picture URLs. I want to rotate through these links, changing the background of a div every 4 seconds.

I'm having no trouble accessing the JSON file or changing the background of the div. However, I can't seem to figure out how to restart at the beginning of the array after every picture has been shown.

How should I approach this problem?

$.getJSON(json, function (data) {
    var arr = $.map(data, function (el) { return el; })
      , i = 0;

    var changeObj = function() {
        i++;
        var url = 'url("' + arr[i].url + '")';
        $this.css({
            backgroundImage: url
        });
    };

    setInterval(changeObj, 4000);           
});

Here's a demo

Upvotes: 1

Views: 612

Answers (2)

royhowie
royhowie

Reputation: 11171

Let's assume your have already parsed your JSON into an array of URLs called myPictureArray and you have written a function called swapInNewPicture, which takes a URL of an image as its argument. (I'm not going to write these functions for you.)

var rotatePictures = function (arr) {
    var length = arr.length
      , i = 0;
    setInterval(function () {
        i = (i + 1) % length;
        swapInNewPicture(arr[i]);
    }, 4000)
}

Now, all you have to do is call rotatePictures(myPictureArray) after you finish parsing your JSON.

Upvotes: 2

Barmar
Barmar

Reputation: 780994

Use the modulus operation so it wraps around when it reaches the end of the array. Replace:

i++;

with:

i = (i + 1) % arr.length;

This is basically equivalent to:

i++;
if (i == arr.length) {
    i = 0;
}

BTW, you can simplify the setInterval call to:

setInterval(changeObj, 4000);

Upvotes: 1

Related Questions