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

あなたはonEachTickのfuncitonにカスタムコードを書くことができ、次の

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

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

を追加することができ、このコードを実行します。 タイマーが動作しているかどうかを確認するには、countdownTest.runningと入力します。

また、タイマーを再起動して一時停止することもできます。今はあなたが望むようにあなたのビューをカスタマイズすることができます。