0

我创建了一个具有以下结构的 jquery 插件：

(function($){

var timer_handle, i = 5 ;

 $.my_plugin = function(){
  return{
    // provide $.my_plugin.reset() public method to reset
    reset : function(){ clearTimeout(timer_handle); }
  }
}();

 $.fn.my_plugin = function(){

    // init codes ...

    function tick(){
      i -= 1;
      console.log(i+'sec elapsed');
      if(i == 0){
      console.log('time over');   
      $.my_plugin.reset();
      }
        timer_handle = setTimeout(tick, 1000);
    }
    tick();
 }
 })(jQuery);

$('body').my_plugin();

当我在控制台看到时，经过 0 秒后，计数器仍在负数运行，即 setTimeout 尚未清除。正如我检查的那样，公共方法 $.my_plugin.reset(); 从外部调用清除计时器，但在滴答关闭内部调用的 $.my_plugin.reset() 不会清除计时器。

这种情况的解决方案可能是什么？？？？？？

4

1 回答 1

0

因为您是$.my_plugin.reset();从函数内部调用，所以tick()没有超时清除。先前安排的超时已经发生，这tick()就是执行的原因。（这与代码是否在闭包中无关。）

i相反，如果已达到，请不要设置下一个超时0：

function tick(){
  i -= 1;
  console.log(i+'sec elapsed');
  if(i == 0){
    console.log('time over');
  } else {
    timer_handle = setTimeout(tick, 1000);
  }
}

如果您要从外部$.my_plugin.reset();的其他代码调用，则会有一个可以清除的未完成超时，因此它将再次停止运行。 tick() tick()

请注意，在立即调用的匿名函数中声明您的timer_handle和i变量意味着对插件的所有调用都将访问这些相同的变量，因此如果您同时针对页面上的多个元素运行插件，您将获得不正确的行为。

于 2012-08-11T12:57:39.400 回答