Question

我有一个我正在动态更新的计时器。

------------------ update -------------------------- 当我第一次发布问题时，我认为从骨干视图中调用计时器并不重要，但我相信由于这个原因，我不能使用全局变量（或者至少是全局变量）不工作）。我将调用多个计时器，因此只设置一个全局变量并删除它将不起作用。我需要能够清除单个计时器而不清除其他计时器。

我启动计时器，

 
function countDown(end_time, divid){
    var tdiv = document.getElementById(divid),
        to;
    this.rewriteCounter = function(){


      if (end_time >= MyApp.start_time)
      {


        tdiv.innerHTML =  Math.round(end_time - MyApp.start_time);
      }
      else {
        alert('times up');
      }
    };
    this.rewriteCounter();
    to = setInterval(this.rewriteCounter,1000);
}

在我的应用程序中，我使用

在骨干视图中启动计时器

MyApp.Views.Timer = Backbone.View.extend({
 el: 'div#timer',

 initialize: function(){
     timer = this.model;
     this.render();
 },
 events: {
    "clicked div#add_time": "update_timer"
 }

 render: function(){
    $(this.el).append(HandlebarsTemplates['timer'](timer);
    this.start_timer();
 },
 start_timer: function(){
    delete main_timer; // this doesn't work :(
    clearTimtout(main_timer); //this doesn't work either :(

    var main_timer = setTimeout(new countDown(timed.length, 'main_timer'),timed.length*1000);
 },

 update_timer: function(){
   timed.length=timed.length+30
  this.start_timer();
 }
});

所以我要做的是更新计时器，终止旧计时器，然后使用新值重新启动它。我有不同的计时器，所以只需在倒计时功能中调用timed.length即可。

Answer 1

var main_timer = setTimeout(new countDown(timed.length, 'main_timer'),timed_length*1000);

此语句创建局部变量main_timer。相反，您必须创建一个全局变量并使用它来清除超时，如下所示

clearTimtout(main_timer);
main_timer = setTimeout(new countDown(timed.length, 'main_timer'),timed_length*1000);

编辑：

使用函数setTimeout处理程序，如下所示

clearTimeout(main_timer); 
main_timer = setTimeout(function(){
    new countDown(timed.length, 'main_timer');
},timed_length*1000);

注意：希望timed.length和timed_length是正确的。

编辑：

修改countdown，如下所示。

function countDown(end_time, divid){
    var tdiv = document.getElementById(divid),
        to;
    this.rewriteCounter = function(){


      if (end_time >= MyApp.start_time)
      {


        tdiv.innerHTML =  Math.round(end_time - MyApp.start_time);
      }
      else {
        alert('times up');
      }
    };

    this.clearRewriteCounter = function(){
      clearInterval(to);
    }

    this.rewriteCounter();
    to = setInterval(this.rewriteCounter,1000);

    return this;
}

和MyApp.Views.Timer

MyApp.Views.Timer = Backbone.View.extend({
 el: 'div#timer',

 initialize: function(){
     timer = this.model;
     this.render();
 },
 events: {
    "clicked div#add_time": "update_timer"
 }

 render: function(){
    $(this.el).append(HandlebarsTemplates['timer'](timer);
    this.start_timer();
 },
 start_timer: function(){
    clearTimeout(this.main_timer); 
    this.main_timer = setTimeout(function(){
        if(this.countDownInstance){
            this.countDownInstance.clearRewriteCounter();
        }
        this.countDownInstance = new countDown(timed.length, 'main_timer');
    },timed_length*1000);
 },

 update_timer: function(){
   timed.length=timed.length+30
  this.start_timer();
 }
});

clearTimeout动态更新计时器

1 个答案: