JavaScript Time Delay

[Sean_d]

I've got 5 images that I want to display one after the other with a time delay, e.g.

image one displayed
0.5 seconds
image two displayed
0.5 seconds
image three displayed

At the moment the HTML looks like this:

<div id="header">
    
    <img id="headerImage0" src="">
    <img id="headerImage1" src="">
    <img id="headerImage2" src="">
    <img id="headerImage3" src="">
    <img id="headerImage4" src="">
    
</div>

The CSS looks like this:

div#header img
{
    visibility: hidden
}
div#header img.headerImageShow
{
    visibility: visible
}

The JavaScript looks like this:

function showImages(i) {
    var image = document.getElementById("headerImage"+i);
    image.className = "headerImageShow";
}
for(i=0;i<=4;i++)
{
    var t=setTimeout("showImages(i)",1000);
}

It seems that you can't pass variables to a function within the setTimeout part of the code, so the showImages function isn't getting passed the i variable that it needs . . . I'm really stuck on how to fix this

Is "setTimeout" deprecated as well? The only articles that I can seem to find on it are about 6 years old.

[LaxLoafer]

Hi Sean

Your showImages function will be called 1000 milliseconds after each call to setTimeout. As the iteration of your 'for' loop will complete very quickly, you should expect to see a one second delay followed by all your images shown in quick succession.

Perhaps the setInverval function is what you are looking for?

[Sean_d]

Thanks LaxLoafer, I'll try the setInterval function then post as to whether it works or not

At the moment it doesn't load any of the images, simply because the i variable isn't passed to the showImages function, do you know any way around that?

[Sean_d]

I've tried using the setInterval function but it seems to do the same thing.

unless I copy

var t=setTimeout("showImages()",1000);

five times it only displays the first image, if I copy it five times it shows all five images but they display after the initial 1000 milisecond interval.

The new code is as follows:

function showImages() {
    var image = document.getElementById("headerImage"+imageNumber);
    image.className = "headerImageShow";
    imageNumber=imageNumber+1
}
var t=setTimeout("showImages()",1000);

Although I have no idea quite how clearInterval() comes into this?

I'd also like to take this opportunity to say I'm quite a beginner concerning JavaScript (as you can probably tell)

[LaxLoafer]

The difference between setTimeout and setInterval is the former will call your showImages function only once.

setTimeout("showImages(0)",1000);
setTimeout("showImages(1)",2000);
setTimeout("showImages(2)",3000);

The three lines of code above will call showImages three times, at 1 second apart.

If you like you could wrap this up into a for loop like:

for(var i = 0; i <= 2; i++) {
setTimeout("showImages(i)", i * 1000);
}

setInterval works slightly differently. You need only call it the once:

var theInterval = setInterval("showImages()", 1000);

This will call your showImages function every second until cleared. Note you need to pass clearInterval the reference obtained from setInterval:

window.clearInterval(theInterval);

You'll want to delay calling clearInterval immediately, otherwise setInterval will appear to do nothing. One way to do this is to assign it to a button click on your page.

<button onclick="window.clearInterval(theInterval)">Stop</button>

Using the setInterval approach, you'd need some way to keep a track of which image is displayed. You could do this with a global variable, which is then incremented inside your showImages function.

var imageIndex = 0;
function showImages() {
  displayImage(imageIndex);
  imageIndex++;
}

Well, something like that. Hope this helps.

[griff122]

Thank you LaxLoafer, as this post maybe old, you had one of the most clear and concise post about the difference between setTimeout and setInterval. In about 2 minutes I know how to use the setInterval and had it working without any problems.

Once again, thank you.