Use of setTimeout - how to pass parameters?

Question

I am trying to develop a slideshow with a pause between slides. So I'm trying to use the setTimeout statement as shown below. This is written to swap 2.jpg for 1.jpg with a pause of 10 seconds on clicking the button. But it does now work. Can anyone help me. Thanks.

<html>
<head>
<script type="text/javascript">
var t;
function swap(newImage) {
  var fileName=newImage.toString()+".jpg"
  document.slideshow.src=fileName
  t=setTimeout("swap()",10000)
}
</script>
</head>  
<body> 
  <img name="slideshow" src="1.jpg" width="450" height="335" />
  <br /><br />
  <input type="button" onClick="swap('2')" value="Change image" /> 
  <br /><br />
</body>
</html>

So what happens? Show more code. I hope your code doesn't actually look like what you posted here. — Strelok, Dec 17 '08 at 00:45
that really doesn't make sense, because the setTimeout action doesn't define an argument, so how could it effectively do anything? — Derek P., Dec 17 '08 at 00:49
Answered in better detail at [How can I pass a parameter to a setTimeout() callback?](http://stackoverflow.com/questions/1190642/how-can-i-pass-a-parameter-to-a-settimeout-callback) — Dan Dascalescu, Apr 17 '15 at 07:25

Eran Galperin · Answer 1 · 2008-12-17T01:25:26.003

There are a couple of things wrong here. First, its passing code to be eval'ed in the first parameter of setTimeout is not recommended. Better pass a callback instead:

 setTimeout(function() { swap(); },10000);
 //Or
 setTimeout(swap,10000); //Passing the actual function as the callback

Second, you are calling the swap() method without parameters inside the timeout. It should pass in a new image filename (perhaps by declaring an array of filenames), or check whether the parameter is set or not.

function swap(newImage,element) { 
   if(newImage) {
       var fileName = newImage.toString()+".jpg"; 
       element.src = fileName;
   }
   t=setTimeout(this,10000) 
}

This function obviously won't do anything after the first run (since no new image filenames are supplied). Using an array you could iterate over several filenames:

var images = ['1.jpg','2.jpg','3.jpg'];
var slideshow = function(element, images, index) {
   if(!index || ( (index + 1) > images.length) ) index = 0;
   element.src = images[index];
   t = setTimeout(function(){
       slideshow(element, images, index + 1);
   },10000) 
};

//Fetch the image element the slideshow is running on
var element = document.slideshow; 
slideshow(element, images);

This will continue switching between the images in the array until the timeout is canceled.

setTimeout can accept a string as the first parameter. that string gets eval()'d so his method would work, if not for forgetting to pass the parameter. — nickf, Dec 17 '08 at 01:17

score 2 · Answer 2 · answered Dec 17 '08 at 00:48

2

Your swap function requires a parameter, so it won't work with setTimeout.

answered Dec 17 '08 at 00:48

OJ.

28,944
5
56
71

score -1 · Answer 3 · answered Dec 17 '08 at 05:14

-1

Javascript isn't necessary to do a slideshow. All you have to do is put each image into a separate page, then add this single line to the top of each page in the <head> section:

<meta http-equiv="refresh" content="10;url=NextPage.html"/>

"10" is the number of seconds to wait before going to the next page, and "NextPage.html" is the link to the page containing the next image to display.

answered Dec 17 '08 at 05:14

Mark Ransom

299,747
42
398
622

@DanDascalescu I don't see why that's worth a downvote. I try to save those for answers that just plain don't work. – Mark Ransom Apr 17 '15 at 13:05

Use of setTimeout - how to pass parameters?

3 Answers3