定時器在javascript中的實現

我已經寫了下面的代碼來實現JS中的定時器。但問題是，對於隨後的遞歸調用，該方法會拋出timeChkSplitTime引用錯誤。它是如何通過settimeout()傳遞的。另外，後來我用這個easy timer js lib。如果可能的話，請提供一個想法，將計時器單獨配置爲分鐘和秒鐘。定時器在javascript中的實現

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

來源

2016-06-11 ShyamSundar R

這個問題對我來說有點不清楚。你想要一個計時器？或倒計時？定時器從00:00開始計數。倒數倒數。 – Bamieh

其倒數計時器 –

我添加了一個代碼片段，應該完全解決您的問題。 – Bamieh

變量不通過字符串解析，在與代碼行：

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

它字面上讀參數的值作爲文本timeChkSplitTime和變量timeChkSplitTime的不是值。除了使用字符串使用功能setTimeout：

setTimeout(timeChk(timeChkSplitTime), 1000);

來源

2016-06-11 15:37:09

哦，是的。謝謝。 –

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

應該

setTimeout(timeChk(timeChkSplitTime), 1000);

來源

2016-06-11 15:37:36 Hammer

你的代碼的麪條代碼一點點。你應該從視圖中分離你的代碼邏輯。將它們分解成函數。最重要的是，在這種情況下使用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; 
 
}

運行該代碼，你可以在onEachTick添加功能可按以下

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

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

您可以編寫自定義代碼。您可以通過輸入countdownTest.running來檢查計時器是否正在運行。

您還可以重新啓動並暫停計時器。現在，您可以根據自己的需要自定義視圖。

來源

2016-06-11 16:47:10 Bamieh

定時器在javascript中的實現

回答

相關問題