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

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

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

Mission aborted.

Answer 2

$(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 3

Just in case anyone else reads this: Although it isn't possible to pass arguments into setInterval or setTimeout in IE in the method the OP outlined. One can do so by using and anonymous function and passing in the arguments that are in scope.

So the OP would need to replace the bad line with:

dTimeout = setTimeout(function(){slidelower($item)}, 200);

This is the expected syntax for setTimeout in IE (2 arguments: function and delay) but the anonymous function will pass the value of $item onto "slidelower"