setTimeout function isn't called?

Question

To put a delay on a menu onmouseover effect, setTimeout is one of the options. But when I try it, the function isn't called.

HTML:

 <li><a href="#" 
 onmouseover="mopendelay('menu_proj')" 
 <li>

JavaScript:

// open hidden layer
function mopen(id)
{ 
 // cancel close timer
 mcancelclosetime();
 // close old layer
 if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
 // get new layer and show it
 ddmenuitem = document.getElementById(id);
 ddmenuitem.style.visibility = 'visible';
}
// delay menu open on mouseover
function mopendelay(id) 
{
 var delay = setTimeout(function(){
 alert('delay'); // isn't called
 mopen(id);
 }, 200);
 clearTimeout(delay);
}

Answer 1

You're clearing timeout before the timeout function can execute.

function mopendelay(id) 
{
 var delay = setTimeout(function(){
 mopen(id);
 }, 200);
}

• user823527: OK. Thanks for all the answers. If I remove clear time out it works. I must also remove the debug alert statement to get the right response.

Answer 2

You're immediately calling clearTimeout on the handle returned by setTimeout. Why is that? I believe the code will work as expected if you remove that.

Answer 3

You're calling clearTimeout directly afterward. Whatever for? Remove that line, and it will work correctly.

Answer 4

Your clear timeout should be outside of the function passed to setTimeout