Question

I’m using setTimeOut to control an automatic slideshow.

(You can see it here: http://thingist.com/labs/ipad.shtml — basically something pretty to look at while I’m working. Images are coming from reddit’s API)

The code looks approximately like this:

next() {
   image_url = images[key]["url"]
   $("#image").html(vsprintf("<img src='%s'>", [image_url]));
   key++;
   setTimeOut(function() { next(); }, 30000);

The problem is that if I trigger the “next” function in another way (for instance with a div onclick), the setTimeOut callback function is still queued. So I’ll “next” an image, but when the callback fires, it “next”s an image again. If you “next” many times in a row, there is an approx 30 second delayed burst that will follow you. (Once all of the queued timeouts fire).

Is there a way to prematurely trigger a setTimeOut’s callback? Or to just dequeue it altogether?

Answer 1

You can use clearTimeout() to clear a previously set timeout.

var timeout;
function next() {
   image_url = images[key]["url"]
   $("#image").html(vsprintf("<img src='%s'>", [image_url]));
   key++;
   timeout = setTimeout(function() { next(); }, 30000);
}

// Clear the timeout by calling clearTimeout()
window.clearTimeout(timeout);