javascript - setTimeout issue in Firefox - Stack Overflow

admin管理员组

文章数量:1410682

The menu system is supposed to expand and collapse according to a given delay using the following statements (o_item.getprop('hide_delay') returns 200 and o_item.getprop('expd_delay') returns 0):

this.o_showtimer = setTimeout('A_MENUS['+ this.n_id +'].expand(' + n_id + ');',
  o_item.getprop('expd_delay'));

and

this.o_hidetimer = setTimeout('A_MENUS['+ this.n_id +'].collapse();',
  o_item.getprop('hide_delay'));

I tried placing the code for the first argument into separate functions and call these functions as the first argument to setTimeout like this:

this.o_showtimer = setTimeout( expandItem(this.n_id, n_id),
      o_item.getprop('expd_delay'));

Firebug produced the following error message:

useless setTimeout call (missing quotes around argument?)

And there was no delay in the collapse.

I placed the argument in quotes (though remended against here) like this:

this.o_showtimer = setTimeout( "expandItem(this.n_id, n_id)",
  o_item.getprop('expd_delay'));

but this didn't work. It appeared that nothing was happening at all and throwing some console.log() messages into the code confirmed this.

I tried using an anonymous function call as remended here and here like this:

this.o_showtimer = setTimeout( function() { expandItem(this.n_id, n_id); },
  o_item.getprop('expd_delay'));

but this didn't work either. It produced undesirable results in IE (items not collapsing is the same manner as before) and nothing happening in Firefox (placing console.log() statements in expandItem and collapseItem functions confirmed that they weren't being called).

I even tried doing the following:

this.o_hidetimer = setTimeout( function() { alert('test'); },
  o_item.getprop('hide_delay'));

and that didn't even work! Seems there's something up with calling the anonymous function.

Discovered that assigning the value of setTimeout to a variable other than this.o_showtimer made the left argument of setTimeout fire. Must be something to do with assigning something to this.

If I do this:

var o_showtimer = setTimeout( function() { expandItem(this.n_id, n_id); },
  o_item.getprop('expd_delay'));

expandItem gets called. However, if I do this:

var o_showtimer = setTimeout( function() { expandItem(this.n_id, n_id); },
  o_item.getprop('expd_delay'));

 this.o_showtimer = o_showtimer;

As if setTimeout can predict the future! (expd_delay is 0!).

The menu system is supposed to expand and collapse according to a given delay using the following statements (o_item.getprop('hide_delay') returns 200 and o_item.getprop('expd_delay') returns 0):

this.o_showtimer = setTimeout('A_MENUS['+ this.n_id +'].expand(' + n_id + ');',
  o_item.getprop('expd_delay'));

and

this.o_hidetimer = setTimeout('A_MENUS['+ this.n_id +'].collapse();',
  o_item.getprop('hide_delay'));

I tried placing the code for the first argument into separate functions and call these functions as the first argument to setTimeout like this:

this.o_showtimer = setTimeout( expandItem(this.n_id, n_id),
      o_item.getprop('expd_delay'));

Firebug produced the following error message:

useless setTimeout call (missing quotes around argument?)

And there was no delay in the collapse.

I placed the argument in quotes (though remended against here) like this:

this.o_showtimer = setTimeout( "expandItem(this.n_id, n_id)",
  o_item.getprop('expd_delay'));

but this didn't work. It appeared that nothing was happening at all and throwing some console.log() messages into the code confirmed this.

I tried using an anonymous function call as remended here and here like this:

this.o_showtimer = setTimeout( function() { expandItem(this.n_id, n_id); },
  o_item.getprop('expd_delay'));

but this didn't work either. It produced undesirable results in IE (items not collapsing is the same manner as before) and nothing happening in Firefox (placing console.log() statements in expandItem and collapseItem functions confirmed that they weren't being called).

I even tried doing the following:

this.o_hidetimer = setTimeout( function() { alert('test'); },
  o_item.getprop('hide_delay'));

and that didn't even work! Seems there's something up with calling the anonymous function.

Discovered that assigning the value of setTimeout to a variable other than this.o_showtimer made the left argument of setTimeout fire. Must be something to do with assigning something to this.

If I do this:

var o_showtimer = setTimeout( function() { expandItem(this.n_id, n_id); },
  o_item.getprop('expd_delay'));

expandItem gets called. However, if I do this:

var o_showtimer = setTimeout( function() { expandItem(this.n_id, n_id); },
  o_item.getprop('expd_delay'));

 this.o_showtimer = o_showtimer;

As if setTimeout can predict the future! (expd_delay is 0!).

• javascript
• firefox
• settimeout

Share Improve this question Follow edited May 23, 2017 at 11:47 CommunityBot 111 silver badge asked Dec 9, 2010 at 12:18 the_new_mrthe_new_mr 3,73155 gold badges4747 silver badges5959 bronze badges 5

• 1 I suspect o_item.getprop('hide_delay') is not integer, so try this: this.o_hidetimer = setTimeout( function() { alert('test'); }, parseInt(o_item.getprop('hide_delay'), 10)); – user447356 Commented Dec 9, 2010 at 14:37
• 1 It sounds like someone is later ing along and doing clearTimeout(this.o_showtimer). – Jason Orendorff Commented Dec 9, 2010 at 15:54
• 1 Quick test (jsfiddle/hkH9n) shows it's not global problem with functions - please show us the code around the this.o_showtimer = and we'll see. – user447356 Commented Dec 9, 2010 at 19:37
• Thanks for your help guys. @Jason, your ment made me investigate further and, through the use of firebug, I discovered what the problem was. There was an abundance of mouse events ing through which must have been overriding the ones I wanted since the functions that handle the events reset the timers. I managed to zero in on the problem and changed a line of code (too much to detail here). I'm not exactly sure now why it was doing the thing it was doing but changing that line solved my problem. Essentially, I had to "new" the menu as opposed to just calling it as a function. – the_new_mr Commented Dec 10, 2010 at 16:49
• Kudos to you guys for your ments. I voted them up as they helped me :) – the_new_mr Commented Dec 10, 2010 at 16:50

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

I think the problem is in Javascript's idiosyncratic treatment of 'this'. When you call 'expandItem' within your anonymous function, you are not calling it as a method, so 'this' gets set to the fundamental scope (window).

I would suggest using a local variable

var that = this;
this.o_showtimer = setTimeout( function() { expandItem(that.n_id, n_id); },
  o_item.getprop('expd_delay'));

本文标签： javascriptsetTimeout issue in FirefoxStack Overflow