Cancel SetInterval() before timer completes

Question

I have a series of buttons that trigger a popup window using SetInterval() after 500 milliseconds on a MouseEvent.ROLL_OVER listener.

However, If the user rolls off the button before the 500 milliseconds is up, I want to cancel the SetInterval() timer. Otherwise, the timer keeps going and displays the popup at the wrong time.

How do I cancel the SetInterval() timer?

My basic code for the rollover and rollout function are as follows:

    function btn_over(event:MouseEvent) {
        var timer = setInterval ( function () {

            hover_bubble.x = itemX + itemW + 10;
            hover_bubble.y = itemY + 30;

            hover_bubble.gotoAndStop('max');
            clearInterval(timer);

        }, 500);
    }


    function btn_out(event:MouseEvent) {
        //something here to stop the "timer" 

        event.target.gotoAndPlay('out');
        hover_bubble.gotoAndStop(1);
    }

Answer 1

Try this:

var timer:uint;
function btn_over(event:MouseEvent) {
        timer = setInterval ( function () {

            hover_bubble.x = itemX + itemW + 10;
            hover_bubble.y = itemY + 30;

            hover_bubble.gotoAndStop('max');
            clearInterval(timer);

        }, 500);
    }


function btn_out(event:MouseEvent) {

    clearInterval(timer);

    event.target.gotoAndPlay('out');
    hover_bubble.gotoAndStop(1);
}