Question

18

JavaScript Infinitely Looping slideshow with delays?

rated 0 times [ 20] [ 2] / answers: 1 / hits: 127447 / 13 Years ago, fri, april 29, 2011, 12:00:00

How do I make an infinite loop in JavaScript? I'm trying to make a slideshow, which I have working, but I can't get it to loop. I can't even get it to loop twice.

The code I'm using right now is

window.onload = function start() {

    slide();

}

function slide() {

    var num = 0;

    for (num=0;num<=10;num++) {

        setTimeout(document.getElementById('container').style.marginLeft='-600px',3000);

        setTimeout(document.getElementById('container').style.marginLeft='-1200px',6000);

        setTimeout(document.getElementById('container').style.marginLeft='-1800px',9000);

        setTimeout(document.getElementById('container').style.marginLeft='0px',12000);

    }

}

Without the for thing in there, it does go through once. When I put in a for, it either makes Firefox lock up, or just loops once. I'm sure this is a really simple thing to do, and even if it has to be loop 1,000,000 times or something instead of infinite, that'd work fine for me.

Also, I don't want to use jQuery or something that someone else created. I'm learning JavaScript, and this is partially to help me learn, and partially because I'm trying to make as many HTML5-based systems as I can.

EDIT: I think the reason it's freezing is because it executes the code all at once, and then just stores it in a cache or something. What I want it to do is go through this once, then start at the top again, which is what I've always thought loops where for. In batch (command prompt) scripting, this could be done with a GOTO command. I don't know if there's an equivalent in JS or not, but that's really my goal.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

shannon

Add To Favorites

Follow

Total Points: 606

Total Questions: 106

Total Answers: 111

Location: Lesotho

Member since Thu, Jun 30, 2022

2 Years ago

answered 13 Years ago deonkalvinw · Accepted Answer

The correct approach is to use a single timer. Using setInterval, you can achieve what you want as follows:

window.onload = function start() {

    slide();

}

function slide() {

    var num = 0, style = document.getElementById('container').style;

    window.setInterval(function () {

        // increase by num 1, reset to 0 at 4

        num = (num + 1) % 4;



        // -600 * 1 = -600, -600 * 2 = -1200, etc 

        style.marginLeft = (-600 * num) + px; 

    }, 3000); // repeat forever, polling every 3 seconds

}