Why does firebug say my function call is "undefined"

Question

I have a navigation menu which contain sub menus. On hover I want the sub menus to show after a second delay. Menu items marked with a class of "more" contain sub menus.

Problem is that one of my functions called hoverCheck() is coming back as undefined when it's called. But I can't figure out why.

Here's my code:

$(document).ready(function() {
 navigation();
});

function navigation() {
 var moreMenu = $('.nav li.more');
 var hovering;

 function hoverCheck() {
  hovering = 'hover';
  openMenu();
 }

 function openMenu() {
  if(hovering == 'hover') {
   $(this).children('ul').slideDown('fast');
  } 
 }

 moreMenu.mouseenter(function() {
  setTimeout("hoverCheck()",1000);
 });
 moreMenu.mouseleave(function() {
  hovering = null;
  $(this).children('ul').slideUp('fast');
 });

}

Answer 1

You're getting an error because that function isn't defined in the global scope, instead you should do this:

setTimeout(hoverCheck, 1000);

As a general rule, try to always avoid passing a string to setTimeout(), give it a function reference directly - otherwise you may run into scoping issues, just like this :)

Answer 2

The setTimeout function takes an expression as the first argument, not the name of a function. If you replace

setTimeout("hoverCheck()",1000);

with

setTimeout(function() {hoverCheck();}, 1000);

that might do the trick.