Using clearTimeout to cancel a timeout event

Question

I have the following code but the clear timeout doesn't work and I can't understand why, does anyone have any ideas? (Using the Prototype framework)

function foo() {
    $("navigation").observe('mouseover',
        function (event) {
            clearTimeout(bar);
        }
    ).observe('mouseout',
        function (event) {
            setTimeout(bar, 1000);
        }
    );
}

function bar() {
    alert("hi");
}

Answer 1

You need to store the result of setTimeout in a variable, and use clearTimeout to clear that variable, not the function:

var timer;

function foo() {
    $("navigation").observe('mouseover',
        function (event) {
                clearTimeout(timer);
        }
    ).observe('mouseout',
        function (event) {
                timer = setTimeout(bar, 1000);
        }
    );
}

function bar() {
    alert("hi");
}

Answer 2

Because the clearTimeout function take the argument returned by the setTimeout function:

var t = null;
function foo() {
    $("navigation").observe('mouseover',
        function (event) {
            if (t != null) clearTimeout(t);
        }
    ).observe('mouseout',
        function (event) {
            t = setTimeout(bar, 1000);
        }
    );
}

function bar() {
    alert("hi");
}

Answer 3

See the mozilla docs on window.setTimeout():

setTimeout actually returns a reference which you can use to clear the timeout:

tId = setTimeout(bar, 1000);
clearTimeout(tId);