鼠标退出时的clearTimeout

我有一个像这样的计时器设置：

var timerID; $this.hover(function(){ $this.find('.stage_obj').each(function(index){ var current_obj = $(this); timerID = setTimeout(function(){ animate_on_top(current_obj, index);}, parseInt(OS.delay_y_on_set[index],10)); }); }, function(){ clearTimeout(timerID); }); 

有一些function可以控制hover时的动画输入/输出。 定时器充当延迟（.delay在我的情况下不起作用）。 一切正常，除了鼠标退出时没有取消计时器，仍然会触发。 这是被调用的实际animation_on函数：

 function animate_on_top(current_obj, index){ current_obj.animate( {'top':OS.ends_y_set[index]}, {duration:500, queue:false, specialEasing:{'top':'linear'} }); 

任何人都有任何想法为什么setTimeout没有取消计时器？ 谢谢！

Answer 1

未清除超时的原因是因为您通过each超时设置多个超时，但仅存储（因此清除）其中一个超时。 您需要存储并清除您创建的每个超时ID。

 var timerID = []; $this.hover(function(){ $this.find('.stage_obj').each(function(index){ var current_obj = $(this); var currentTimerID = setTimeout(function(){ animate_on_top(current_obj, index);}, parseInt(OS.delay_y_on_set[index],10)); timerID.push(currentTimerID); }); }, function(){ for (var i = 0; i < timerID.length; i++) { clearTimeout(timerID[i]); } }); 

Answer 2

您在循环中使用相同的变量timerID，因此对于每次迭代，引用都将更改为最后一个。

当你清除时，你实际上只清除了最后一个，而不是你创建的参考！

您应该更改代码以传递对象列表，以便为方法animate_on_top()设置动画，而不是为每个对象设置独立的计时器。

或者，您可以将不同setTimout（）调用返回的引用推送到数组中，并清除mouseout上数组的所有引用。 就像是：

 var timerID = []; $this.hover(function(){ $this.find('.stage_obj').each(function(index){ var current_obj = $(this); var timer = setTimeout(function(){ animate_on_top(current_obj, index);}, parseInt(OS.delay_y_on_set[index],10)); }); timerID.push(timer); }, function(){ for (var i = 0; i < timerID.length; i++) { clearTimeout(timerID[i]); } });