Функция, чтобы остановить этот таймер Javascript

Question

Я новичок в Javascript, я получил этот Javascript-таймер из сети. Я пытаюсь остановить таймер и вставить остановленное время в базу данных, если установлена ​​определенная переменная PHP, но я не уверен, как остановить таймер. Вот код. Я видел этот пост и, к сожалению, я все еще не могу заставить его работать. How to stop a timer function from running? Спасибо!

<script type="text/javascript"> 
/********************************************************************************************** 
* CountUp script by Praveen Lobo (http://PraveenLobo.com/techblog/javascript-countup-timer/) 
* This notice MUST stay intact(in both JS file and SCRIPT tag) for legal use. 
* http://praveenlobo.com/blog/disclaimer/ 
**********************************************************************************************/ 
function CountUp(initDate, id){ 
    this.beginDate = new Date(initDate); 
    this.countainer = document.getElementById(id); 
    this.numOfDays = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ]; 
    this.borrowed = 0, this.years = 0, this.months = 0, this.days = 0; 
    this.hours = 0, this.minutes = 0, this.seconds = 0; 
    this.updateNumOfDays(); 
    this.updateCounter(); 
} 



CountUp.prototype.updateNumOfDays=function(){ 
    var dateNow = new Date(); 
    var currYear = dateNow.getFullYear(); 
    if ((currYear % 4 == 0 && currYear % 100 != 0) || currYear % 400 == 0) { 
     this.numOfDays[1] = 29; 
    } 
    var self = this; 
    setTimeout(function(){self.updateNumOfDays();}, (new Date((currYear+1), 1, 2) - dateNow)); 
} 

CountUp.prototype.datePartDiff=function(then, now, MAX){ 
    var diff = now - then - this.borrowed; 
    this.borrowed = 0; 
    if (diff > -1) return diff; 
    this.borrowed = 1; 
    return (MAX + diff); 
} 

CountUp.prototype.calculate=function(){ 
    var currDate = new Date(); 
    var prevDate = this.beginDate; 
    this.seconds = this.datePartDiff(prevDate.getSeconds(), currDate.getSeconds(), 60); 
    this.minutes = this.datePartDiff(prevDate.getMinutes(), currDate.getMinutes(), 60); 
    this.hours = this.datePartDiff(prevDate.getHours(), currDate.getHours(), 24); 
    this.days = this.datePartDiff(prevDate.getDate(), currDate.getDate(), this.numOfDays[currDate.getMonth()]); 
    this.months = this.datePartDiff(prevDate.getMonth(), currDate.getMonth(), 12); 
    this.years = this.datePartDiff(prevDate.getFullYear(), currDate.getFullYear(),0); 
} 

CountUp.prototype.addLeadingZero=function(value){ 
    return value < 10 ? ("0" + value) : value; 
} 

CountUp.prototype.formatTime=function(){ 
    this.seconds = this.addLeadingZero(this.seconds); 
    this.minutes = this.addLeadingZero(this.minutes); 
    this.hours = this.addLeadingZero(this.hours); 
} 

CountUp.prototype.updateCounter=function(){ 
    this.calculate(); 
    this.formatTime(); 
    this.countainer.innerHTML = 
     " <strong>" + this.hours + "</strong> <small>" + (this.hours == 1? ":" : ":") + "</small>" + 
     " <strong>" + this.minutes + "</strong> <small>" + (this.minutes == 1? ":" : ":") + "</small>" + 
     " <strong>" + this.seconds + "</strong> <small>" + "</small>"; 
    var self = this; 
    setTimeout(function(){self.updateCounter();}, 1000); 
} 
<?php if(isset($results['calltime'])) {$timevar= date("M d, Y H:i:s",strtotime($results['calltime']));}?> 
window.onload=function(){ new CountUp('<?php echo $timevar; ?>', 'counter'); } 

//I need a function to stop timer if (isset($results['firstcall_time'])) 


</script> 

Answer 1

в методе updateCounter() Вы следующее заявление

setTimeout(function(){self.updateCounter();}, 1000); 

сделать это как следующий первым.

myTimer = setTimeout(function(){self.updateCounter();}, 1000); 

, а затем всякий раз, когда вы хотите остановить таймер, вызовите этот метод.

clearTimeout(myTimer); 

а затем записать время. Он использует setTimeout для подсчета, поэтому вам нужно использовать clearTimeout для остановки контуров.

Reffer Clear Timeout

Приветствия

Answer 2

В строках:

setTimeout(function(){self.updateNumOfDays();}, (new Date((currYear+1), 1, 2) - dateNow)); 

И

setTimeout(function(){self.updateCounter();}, 1000); 

Вы можете увидеть рекурсия используется, таким образом, таймер продолжает работать.

Итак, если вы хотите, чтобы остановить таймер сделать что-то вроде этого:

var flag = true; 
<?php if (isset($results['firstcall_time'])){ ?> 
    flag = false; 
<?php } ?> 

И изменить сценарий немного как:

setTimeout(function(){if(flag){self.updateNumOfDays();}else{//write code to cleartimeout}}, (new Date((currYear+1), 1, 2) - dateNow));//check for the flag before recursion 

И

setTimeout(function(){if(flag){self.updateCounter();}}else{//write code to cleartimeout}, 1000); 

Answer 3

Он ISN используя таймер. Он использует setTimeout, но исполняющая функция - это тот же метод, подобный рекурсии (но, строго говоря, это не так). Итак, все идет. Надеюсь, это имеет смысл.

таймер реализован как:

// Start 
var timerId = setInterval(func() { 
    // your code to execute 
}, 5000); 

// Stop 
clearInterval(timerId); 

Я добавил метод остановки в Countup. Таким образом, вы должны теперь это сделать:

// Start 
var counter = new CountUp(new Date(), 'div'); 

// Stop 
counter.stop(); 

Вот код. Я только что закодировал здесь, поэтому, если есть какие-либо опечатки или что-то не работает, опубликуйте комментарий.

function CountUp(initDate, id){ 
    this.beginDate = new Date(initDate); 
    this.countainer = document.getElementById(id); 
    this.numOfDays = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ]; 
    this.borrowed = 0, this.years = 0, this.months = 0, this.days = 0; 
    this.hours = 0, this.minutes = 0, this.seconds = 0; 

    this.daysTimerId = setInterval(this.updateNumOfDays(), this.getDaysTimerInterval()); 
    this.updateTimerId = setInterval(this.updateCounter(), 1000); 
} 

CountUp.prototype.stop=function(){ 
    clearInterval(this.daysTimerId); 
    clearInterval(this.updateTimerId); 
} 

CountUp.prototype.getDaysTimerInterval=function(dt){ 
    var dateNow = dt || new Date(); 
    return (new Date((dateNow.getFullYear()+1), 1, 2) - dateNow)); 
} 

CountUp.prototype.updateNumOfDays=function(){ 
    var dateNow = new Date(); 
    var currYear = dateNow.getFullYear(); 
    if ((currYear % 4 == 0 && currYear % 100 != 0) || currYear % 400 == 0) { 
     this.numOfDays[1] = 29; 
    } 
// var self = this; 
// setTimeout(function(){self.updateNumOfDays();}, self.getDaysTimerInterval(dateNow)); 
} 

CountUp.prototype.datePartDiff=function(then, now, MAX){ 
    var diff = now - then - this.borrowed; 
    this.borrowed = 0; 
    if (diff > -1) return diff; 
    this.borrowed = 1; 
    return (MAX + diff); 
} 

CountUp.prototype.calculate=function(){ 
    var currDate = new Date(); 
    var prevDate = this.beginDate; 
    this.seconds = this.datePartDiff(prevDate.getSeconds(), currDate.getSeconds(), 60); 
    this.minutes = this.datePartDiff(prevDate.getMinutes(), currDate.getMinutes(), 60); 
    this.hours = this.datePartDiff(prevDate.getHours(), currDate.getHours(), 24); 
    this.days = this.datePartDiff(prevDate.getDate(), currDate.getDate(), this.numOfDays[currDate.getMonth()]); 
    this.months = this.datePartDiff(prevDate.getMonth(), currDate.getMonth(), 12); 
    this.years = this.datePartDiff(prevDate.getFullYear(), currDate.getFullYear(),0); 
} 

CountUp.prototype.addLeadingZero=function(value){ 
    return value < 10 ? ("0" + value) : value; 
} 

CountUp.prototype.formatTime=function(){ 
    this.seconds = this.addLeadingZero(this.seconds); 
    this.minutes = this.addLeadingZero(this.minutes); 
    this.hours = this.addLeadingZero(this.hours); 
} 

CountUp.prototype.updateCounter=function(){ 
    this.calculate(); 
    this.formatTime(); 
    this.countainer.innerHTML = 
     " <strong>" + this.hours + "</strong> <small>" + (this.hours == 1? ":" : ":") + "</small>" + 
     " <strong>" + this.minutes + "</strong> <small>" + (this.minutes == 1? ":" : ":") + "</small>" + 
     " <strong>" + this.seconds + "</strong> <small>" + "</small>"; 
// var self = this; 
// setTimeout(function(){self.updateCounter();}, 1000); 
} 

Answer 4

Вот как я остановил счетчик:

Я вставил эти несколько строк, прежде чем «CountUp.prototype.updateCounter = функция() {»

var today=new Date(); 
var start=new Date(2013,10,25,5,35,0); //example: Stop date 
diff = start-today; 

Затем внутри функции updateCounter, вместо того, чтобы сразу позвонить SetTimeout Я добавил условие:

if (((this.seconds==0) && (this.minutes==0) (this.hours==0) && (this.days==0)) || (diff <=0)) { //on the fly (page is laready open with the counter running) or onload 
    //Time's up! 
    } else { 
     setTimeout(function(){self.updateCounter();}, 1000); 
    } 

Таким образом, новый код будет выглядеть следующим образом:

var today=new Date(); 
var start=new Date(2013,10,25,5,35,0); 
diff = start-today; 

Counter.prototype.updateCounter=function(){ 
this.calculate(); 
this.formatTime(); 
this.countainer.innerHTML = " <strong>" + this.seconds + "</strong> " + (this.seconds == 1? ":" : ":")+ 
    " <strong>" + this.minutes + "</strong> " + (this.minutes == 1? ":" : ":")+ 
    " <strong>" + this.hours + "</strong> " + (this.hours == 1? ":" : ":")+ 
    " <strong>" + this.days + "</strong> " + (this.days == 1? ":" : ""); 
var self = this; 
if (((this.seconds==0) && (this.minutes==0) (this.hours==0) && (this.days==0)) || (diff <=0)) { //on the fly or onload 
//Time's up! 
} else { 
setTimeout(function(){self.updateCounter();}, 1000); 
} 
} 

Надеется, что поможет.

Шамс