Как остановить динамический таймер, нажав на них?

Question

У меня есть сценарий, мне нужно добавить таймер динамически. Это означает, что мне нужно отображать записи из базы данных с таймером в конце. Я сделал со следующим кодом.

Мой Таймер Функция в JavaScript

timer.js

var Timer; 
var TotalSeconds; 

function CreateTimer(TimerID, Time){ 
    var oop=this; 
    this.Timer = document.getElementById(TimerID); 
    this.TotalSeconds = Time; 
    this.update(); 
    oop.to=setTimeout(function(){ oop.tick(); }, 1000); 
} 

CreateTimer.prototype={ 
    tick:function(){ 
    var oop=this; 
    if (this.TotalSeconds <= 0){ 
     return; 
    } 
    this.TotalSeconds -= 1; 
    this.update() 
    oop.to=setTimeout(function(){ oop.tick(); }, 1000); 
}, 

update:function(){ 
    var Seconds = this.TotalSeconds,Days = Math.floor(Seconds/86400); 
    Seconds -= Days * 86400; 
    var Hours = Math.floor(Seconds/3600); 
    Seconds -= Hours * (3600); 
    var Minutes = Math.floor(Seconds/60); 
    Seconds -= Minutes * (60); 
    var TimeStr = ((Days > 0) ? Days + " days " : "") + 
    LeadingZero(Hours) + ":" + LeadingZero(Minutes) + ":" + LeadingZero(Seconds) 
    this.Timer.innerHTML = TimeStr; 
}, 

stop:function(){ 
    clearTimeout(this.to); 
} 
} 

function LeadingZero(Time){ 
    return (Time < 10) ? "0" + Time : + Time; 
} 

и мой код, который добавляет таймер динамически есть

timertest.php

foreach($records as $value){ 
    $i = 1; 
    // Displaying other datas in table datas at the end i have added my image 
     echo '<td> 
     <span id="timer"+$i> 
      <img src="path/to/image/" id="myimg" /> 
     </span> 
     </td>'; 
} 

в то время как мыши на том, что я заменил свое изображение своим таймером

{ 
    // other codes 
    timer+i = new CreateTimer('timer'+i, 60); 
} 

Его работа прекрасна только. Его отображение таймера, как я думаю. Мне нужно остановить таймер, щелкнув по нему. У меня нет никакой идеи сделать это.

Пожалуйста, помогите мне в этом вопросе.

Answer 1

Если это функция, в которую вы хотите включить все таймеры, я бы ее инкапсулировал. например:

//... 
function CreateTimer(TimerID, Time){ 
    var oop=this; 
    this.Timer = document.getElementById(TimerID); 
    // here. add Event listener to the DOM element 
    var self = this; //save self 
    this.timer.addEventListener('click', function() { 
     self.stop(); 
    }); 
    // ## end ## 
    this.TotalSeconds = Time; 
    this.update(); 
    oop.to=setTimeout(function(){ oop.tick(); }, 1000); 
} 
//...