IE errors with jQuery & timeout

Question

In a jquery hover event I use the following code to drop down a menu:

clearTimeout(hTimeout);
$('#lowermenu').queue('fx', []);
$('#menucenter .current').removeClass('current');
$(this).children('a').addClass('current');        
dTimeout = setTimeout(function($item){slidelower($item)}, 200, $(this)); // This is the bad line

function slidelower($li)
{
    $li.addClass('dropping');
    $lowermenu = $li.children('ul').clone();
    $('#lowermenu:not(:animated)').empty().append($lowermenu).slideDown();
    $('#lowermenu > ul > li:not(:animated)').hover(function()
    {                      
        $(this).children('ul:hidden').css('top', 'auto').slideDown();
    }, function()
    {
        $(this).children('ul:visible').slideUp();
    });
}

I get the following error:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB6.3; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; OfficeLiveConnector.1.3; OfficeLivePatch.0.0) Timestamp: Sat, 14 Nov 2009 11:12:46 UTC

Message: 'undefined' is null or not an object

Line: 81

Char: 25

Code: 0

URI: [the url was here]

I suspect that it's caused by the setTimeout - I am passing in a third parameter as an argument for the anonymous function. That anonymous function calls a function with a closure.

Can anyone help?

Answer 1

$(this).children('a').addClass('current');   
var that = this;     
dTimeout = setTimeout(function($item){slidelower($item)}, 200, that); // This is the bad line

setTimeout is owned by the window object, therefore this refers to window. Save the reference to the outer context by caching it with a 'that' variable.

Answer 2

OK, I found the problem. setTimeout in IE doesnt support the additional parameters:

https://developer.mozilla.org/en/window.setTimeout

Mission aborted.