Firefox 中的 setTimeout 问题答案

【问题标题】：setTimeout issue in FirefoxFirefox 中的 setTimeout 问题
【发布时间】：2010-12-09 12:18:51
【问题描述】：

菜单系统应该使用以下语句根据给定的延迟展开和折叠（o_item.getprop('hide_delay') 返回 200，o_item.getprop('expd_delay') 返回 0）：

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

和

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

我尝试将第一个参数的代码放入单独的函数中，并将这些函数作为 setTimeout 的第一个参数调用，如下所示：

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

Firebug 产生以下错误消息：

useless setTimeout call (missing quotes around argument?)

而且崩溃并没有延迟。

我将参数放在引号中（尽管建议反对here），如下所示：

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

但这没有用。似乎什么都没有发生，将一些 console.log() 消息扔到代码中证实了这一点。

我尝试像这样使用here 和here 推荐的匿名函数调用：

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

但这也不起作用。它在 IE 中产生了不良结果（项目不折叠与以前的方式相同）并且在 Firefox 中没有发生任何事情（在 expandItem 和 collapseItem 函数中放置 console.log() 语句确认它们没有被调用）。

我什至尝试过以下操作：

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

这甚至没有用！调用匿名函数似乎有问题。

发现将 setTimeout 的值分配给除 this.o_showtimer 之外的变量 other 会使 setTimeout 的 left 参数触发。必须与为此分配一些东西有关。

如果我这样做：

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

expandItem 被调用。但是，如果我这样做：

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

 this.o_showtimer = o_showtimer;

好像setTimeout可以预测未来！（expd_delay 为 0！）。

【问题讨论】：

我怀疑o_item.getprop('hide_delay') 不是整数，所以试试这个：this.o_hidetimer = setTimeout( function() { alert('test'); }, parseInt(o_item.getprop('hide_delay'), 10));
好像后来有人过来做clearTimeout(this.o_showtimer)。
快速测试 (jsfiddle.net/hkH9n) 表明这不是函数的全局问题 - 请向我们展示 this.o_showtimer = 周围的代码，我们会看到。
感谢你们的帮助。 @Jason，您的评论让我进一步调查，通过使用萤火虫，我发现了问题所在。由于处理事件的函数重置了计时器，因此有大量的鼠标事件一定会覆盖我想要的事件。我设法将问题归零并更改了一行代码（此处无法详述）。我现在不完全确定为什么它正在做它正在做的事情，但改变那条线解决了我的问题。本质上，我必须“新建”菜单，而不是仅仅将其作为函数调用。
感谢你们的 cmets。我投票支持他们，因为他们帮助了我 :)

【解决方案1】：

我认为问题在于 Javascript 对“this”的特殊处理。当您在匿名函数中调用“expandItem”时，您并未将其作为方法调用，因此“this”被设置为基本范围（窗口）。

我建议使用局部变量

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

【讨论】：