Question

I have this code:

function beforemouseout() {
  if ($(this).val() == '') {
    $(this).val($(this).attr('title'));

  } 
  else {

  }
  setTimeout('beforemouseout()',3000); 
}
$(".other").click(function() {
  $(this).val('');  
  $(".other").mouseout(beforemouseout);
});

<input id="hour" type="text" class="other" autocomplete="off" value="hour" title="hour" />
<input id="hour" type="text" class="other" autocomplete="off" value="minutes" title="minutes" />

But Firebug gives me an error: beforemouseout is not defined.
Why?
I tried it on jsfiddle.net and it doesn’t give an error , but the result is not what I expected.I expected when i click on #hour to hide the text and when onmouseout is triggered to wait 5 second and then – to do the checks

Answer 1

Change your setTimeout like this:

setTimeout(beforemouseout ,3000); 

Otherwise it’s looking for beforemouseout in a global context, and if your code isn’t in there (it’s inside/scoped to another closure of any kind), it won’t find it. I’m guessing here that it’s in a ready handler because you’re posting HTML right beside it, meaning you’re taking snippets.

From an overall standpoint, never pass a string to setTimeout() or setInterval() if you can avoid it, it results in many unwanted side-effects…like this one. Instead, pass a direct reference like I have above, to be entirely explicit and well…make it work 🙂

---

Edit (for question comments): it seems what you’re actually after it still a bit different than it’s written. From what I gather you want to delay before restoring the default value to the <input>. There are several ways to do this, here’s one:

function beforemouseout() {
  if ($(this).val() == '') {
    $(this).val($(this).attr('title'));
  }
}
$(".other").click(function() {
  $(this).val('').mouseout(function() {
    setTimeout($.proxy(beforemouseout, this), 3000);
  });
});

You can give it a try here.
​