Question

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

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);
});

有一些功能可以在悬停时控制动画的输入/输出。定时器充当延迟（.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]);
   }
});

鼠标退出时的clearTimeout

2 个答案: