How To Stop a Function

[Postdog]

window.onload = initLinks;
 
function initLinks() {
    document.getElementById("rotateBack").onclick = rotateBack;
    document.getElementById("rotate").onclick = rotateFor;
}
 
var thisAd = 0;
 
var adImages = new Array("catImages/1.png","catImages/2.png","catImages/3.png","shoeImages/4.png","catImages/5.png","catImages/6.png","catImages/7.png","catImages/8.png","catImages/9.png","catImages/10.png");
 
function rotateFor() {
    thisAd++;
    if (thisAd == adImages.length) {
        thisAd = 0;
    }
    document.getElementById("adBanner").src = adImages[thisAd];
    setTimeout(rotateFor, 500);
}
 
function rotateBack() {
    if (thisAd == 0) {
        thisAd = adImages.length;
    }
    thisAd--;
    document.getElementById("adBanner").src = adImages[thisAd];
    setTimeout(rotateBack, 500);
}
 

Hi,

I'm a beginner and working through a JavaScript tutorial guide, while trying to develop a small project at the same time. A part I'm stuck on involves an animation that runs through a group of images and is triggered by a "rotateFor" button and another button that reverses the animation "rotateBack".

I've got each button to work individually in there respective directions, however when I press the second of either two buttons it obviously still remembers the previous function and just jumps back and forth.

I can't figure out how to cancel the previous function, I realise that it involves implementing something like rotateBack = null; into "rotateFor" function (for example) but I don't understand enough to implement this correctly.

Thanks in advance for any help,

Phil

[Rabbit]

Use the clearTimeout function to cancel it.