реализация таймера в javascript

Question

Я написал следующий код для реализации таймера в JS. Но проблема заключается в том, что для последующих рекурсивных вызовов метод вызывает опорную ошибку для timeChkSplitTime. Как это происходит, поскольку оно передается в settimeout(). Кроме того, позже я использовал простой таймер js lib для этого. Если возможно, PLS предлагает идею настроить таймер только на минуты и секунды.

function timeChkold(timeChkSplitTime) { 
    var min = timeChkSplitTime[0], sec = timeChkSplitTime[1]; 
    if (!(timeChkSplitTime[0]==0 && splitTime[1]==0)) { 
     var strSec, strMin = "0"+min.toString(); 
     if (sec < 10) strSec = "0"+ sec.toString(); 
     else strSec = sec.toString(); 
     $(".timer-btn time").html(strMin+":"+strSec); 
     timeChkSplitTime[0]=0; 
     if (sec > 0) timeChkSplitTime[1]--; 
     else timeChkSplitTime[1] = 59; 
     setTimeout("timeChk(timeChkSplitTime);", 1000); 
    } 
    else { 
     var startBtn = $(".start-btn"); 
     startBtn.html("Start"); 
     startBtn.css({ 
      "border": "1px solid #56B68B", 
      "background": "#56B68B", 
     }); 
     var startTime = "01:00"; 
     $(".timer-btn time").html(startTime); 
    } 
} 

Answer 1

Переменные не проанализирован с помощью строк, по строке с кодом:

setTimeout("timeChk(timeChkSplitTime);", 1000); 

Это буквально читает параметр как значение в тексте timeChkSplitTime, а не значение переменной timeChkSplitTime. Другие, чем при использовании строки используйте функцию setTimeout:

setTimeout(timeChk(timeChkSplitTime), 1000); 

Answer 2

setTimeout("timeChk(timeChkSplitTime);", 1000); 

должен быть

setTimeout(timeChk(timeChkSplitTime), 1000); 

Answer 3

ваш код немного кода спагетти. вы должны отделить свою логику кода от представления. разделить их на функции. и самое главное, использование setTimeout в этом случае неэффективно.

var CountdownTimer = function(startTime) { 
 
    var timeInSeconds = this.stringToSeconds(startTime); 
 
    this.original = timeInSeconds; 
 
    this.time = timeInSeconds; 
 
    this.running = false; 
 
} 
 

 
CountdownTimer.prototype.start = function(callback) { 
 
    this.running = true; 
 
    this.interval = setInterval(function() { 
 
     if(this.time < 1) { 
 
     this.running = false; 
 
     clearInterval(this.interval); 
 
     } else { 
 
     this.time -= 1; 
 
     callback(); 
 
     } 
 
    }.bind(this), 1000); 
 
} 
 

 
CountdownTimer.prototype.pause = function() { 
 
    if(this.running) { 
 
    this.running = false; 
 
    clearInterval(this.interval); 
 
    } 
 
} 
 
CountdownTimer.prototype.restart = function() { 
 
    this.time = this.original; 
 
} 
 

 
CountdownTimer.prototype.stringToSeconds = function(timeSting) { 
 
    var timeArray = timeSting.split(':'); 
 
    var minutes = parseInt(timeArray[0], 10); 
 
    var seconds = parseInt(timeArray[1], 10); 
 
    var totalSeconds = (minutes*60) + seconds; 
 
    return totalSeconds; 
 
} 
 
CountdownTimer.prototype.secondsToStrings = function(timeNumber) { 
 
    finalString = ''; 
 
    var minutes = parseInt(timeNumber/60, 10); 
 
    var seconds = timeNumber - (minutes*60); 
 
    var minStr = String(minutes); 
 
    var secStr = String(seconds); 
 
    if(minutes < 10) minStr = "0" + minStr; 
 
    if(seconds < 10) secStr = "0" + secStr; 
 
    return minStr + ":" + secStr; 
 
}

запустить этот код вы можете добавить следующую

var countdownTest = new CountdownTimer("01:15"); 
countdownTest.start(onEachTick); 

function onEachTick() { 
    var time = countdownTest.secondsToStrings(countdownTest.time); 
    console.log(time) 
} 

Вы можете написать свой собственный код в Funciton onEachTick. вы можете проверить, работает ли таймер, набрав countdownTest.running.

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