Question

My code below needs to put in a setInterval within a for loop. I basically need to put in a 10 second pause between the next iteration of the for loop. This is for a very basic script which shows banners in a div for 10 seconds before moving onto the next one. It existing setInterval is code I got off another website as I ran out of options. Any help? And if you don’t mind explaining the logic to me so that I know for the future 🙂

$("document").ready(function() {

// bannerChange
function bannerChange(banner,div,milliseconds) {
    var length = banner.length;
    for(i=0;i<length;i++) {
        (function(i) {
            setInterval(function() {
                var url = banners[i].url;
                var img = banners[i].image;
                $("#"+div).html("<a href='"+url+"' target='_Blank'><img src='www/images/banners/"+img+"' /></a>");
            },milliseconds)
        })(i);
    }
}

function showBanner(bannerName, bannerDiv, milliseconds) {
    var url = "www/scripts/ajax/getBanners.php";
    $.post(url, {name: bannerName}, function(data) {
        if(data.response == true) {
            bannerChange(data.banners,bannerDiv,milliseconds);
        }
    });
}

// Run banners
showBanner("Test Banner","test",10000);
});

Answer 1

Here’s an updated version based on the comment:

// Start by getting the banners:

var banners = [];
var currentBanner;

function getBannersFromServer(...) {
    // TODO: make ajax call to server for banners

    // push the banners into a queue for later
    for (var i in bannerFromServer) {
        banners.push(bannersFromServer[i]);
    }
}

// Then run through them:

function showNextBanner() {
    // advance to next banner
    currentBanner++

    // go back to the beginning after the last banner is displayed
    if(currentBanner >= banners.length) currentBanner = 0;

    // pull a banner out of the queue
    var banner = banners[currentBanner];

    // TODO: Show the banner in the div

    // do it again in 10 seconds
    showNextBanner();
}

// start it all
getBannersFromServer();
getNextBanner();