setTimeout and mouseout problem

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

Yes don't pass string as parameter of setTimeout function hope you ll be done. By the way I think setTimeout is not required here. You are filling the field with 'title' if it is empty everytime while mouse is being out. if you use setTimeout and mouseout both together that will increase you function calling exponentially.I think you understand my point of view.
Thanks

Answer 2

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. ​

Answer 3

Change $(".other").mouseout(beforemouseout); to this:

$(".other").mouseout(function(){ 
  beforemouseout();
});