Question

I’ve got a timer that I’m updating dynamically.

——————update ————————–
when I first posted the question, I didn’t think it mattered that the timer was being called from within a backbone view, but I believe as a result of that, I can’t use a global variable (or at least a global variable isn’t working). I’ll be calling multiple timers, so setting only one global variable and deleting it won’t work. I need to be able to clear a single timer without clearing the others.

What I start the timer,

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

in my app, I initiate the timer in a backbone view with

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

so what I’m trying to do is to update the timer, kill the old timer, and then restart it with the new values. I have different timers, so just calling the timed.length within the countdown function won’t work.

Answer 1

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

This statement creates a local variable main_timer. Instead you have to create a global variable and use that to clear the time out as shown below

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

EDIT:

use a function as setTimeout handler as shown below

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

note: hope timed.length and timed_length are correct.

EDIT:

modify countdown like given below.

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

and in 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();
 }
});