so im trying to make the images change and make them into a loop and i came up with this script, and the problem i am having is that, when it change to the second picture the javascript would freeze up on me, I know it the while(true) part but i dont know how to fix it, please help.
thanks you

var images = new Array();
images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";
setTimeout("changeImage()", 3000);
var x=0;

function changeImage()
{
    while(true){
        document.getElementById("img").src=images[x]
        x++;
    }

    if (x=2){
        x=0;
    }
}

so im trying to make the images change and make them into a loop and i came up with this script, and the problem i am having is that, when it change to the second picture the javascript would freeze up on me, I know it the while(true) part but i dont know how to fix it, please help.
thanks you

var images = new Array();
images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";
setTimeout("changeImage()", 3000);
var x=0;

function changeImage()
{
    while(true){
        document.getElementById("img").src=images[x]
        x++;
    }

    if (x=2){
        x=0;
    }
}

• javascript
• image
• loops
• while-loop

Share Follow edited May 7, 2013 at 17:59 Cemafor 1,6531212 silver badges2828 bronze badges asked May 7, 2013 at 17:53 kthao91kthao91 3722 silver badges66 bronze badges 3

• 4 "hey doc, it hurts when I do this" – Sam I am says Reinstate Monica Commented May 7, 2013 at 17:54
• When will that value ever change? – Joe W Commented May 7, 2013 at 18:05
• There must be a variable terminal condition for the loop to end. As it has been pointed out, to avoid an endless loop do not put a constant into your loop condition. – RacerNerd Commented May 7, 2013 at 18:13

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Ah, I see what you're trying to do.

while (true) is going to loop forever synchronously. What you want is to continually change images every 3 seconds (asynchronously).

Try this:

var timeoutId = null;

function changeImage() {
  document.getElementById("img").src = images[x];
  x = (x + 1) % images.length;
  timeoutId = setTimeout(changeImage, 3000);
}

This way, changeImage will not loop forever; but every time it's called it will schedule another call to changeImage in 3 more seconds. This asynchronous process will continue indefinitely (what you were trying to do with while (true)) until the user leaves the page or you choose to call clearTimeout(timeoutId).

Note that you could also get rid of the global variable x by making it a parameter to changeImage, like this:

function changeImage(x) {
  document.getElementById("img").src = images[x];
  timeoutId = setTimeout(function() {
    changeImage((x + 1) % images.length);
  }, 3000);
}

It's because you've intentionally created an infinite loop.

I'm not sure what other explanation you're after....

Your code will never reach the condition:

if (x=2)

because it never gets out of the loop. Provide some way to escape the loop. If your intention is to regularly cycle images then perhaps you should consider getting the images on a timer.

Also, your code implies there are an infinite number of images.

Your browser freezes up because JavaScript is single-threaded; it will ignore all inputs and events until the loop is done.

What you really want is something like this:

var x = 0; 
var nextImage= function () { 
    document.getElementById("img").src = images[x]; 
    x = (x + 1) % images.length;
}
setInterval(nextImage, 3000);

at each cycle, the code changes one image and quits, allowing other events to be handled.

BTW, I wasn't trying to write good JavaScript, just to answer your question.