Question

I’m just trying some JS animations, and I have animated a box that moves within borders, but I would like the animation to stop when the box hits one of the borders. This is one of the functions I use:

function AnimMoveRight() {
    var interval = setInterval("moveRight(10)", 40);
    if (hitRight == true) {
        clearInterval(interval);
    }
}

The moveRight(10) changes the box’position for 10 pixels to the right. hitRight is set true when the box hits the right border. Well, obviously, this code doesn’t work, it just keeps on looping the moveRight() function. Now, my question is, how do I cancel the interval from within the AnimMoveRight() function?

Answer 1

function AnimMoveRight() {
    var interval;
    function fnc(){
        if (hitRight == true) {
            window.clearInterval(interval);
        }
        else{
            moveRight(10);
        }
    }
    interval = setInterval(fnc, 40);
}