Javascript setIntervalが動作していないタイマー？

Question

私は描かれているが、全く変化しないタイマーを持っています。それは0：01を示し、2番目に追加されていません。これはおそらくsetIntervalと関係がありますが、わかりません。

function drawTimer() { 
    var fontSize = 15; 
    graph.lineWidth = playerConfig.textBorderSize; 
    graph.fillStyle = playerConfig.textColor; 
    graph.strokeStyle = playerConfig.textBorder; 
    graph.miterLimit = 1; 
    graph.lineJoin = 'round'; 
    graph.textAlign = 'right'; 
    graph.textBaseline = 'middle'; 
    graph.font = 'bold ' + fontSize + 'px sans-serif'; 

    var gameTimeMinutes = 0; 
    var gameTimeSeconds = 1; 
    var gameTime = ""; 

    function addTime() { 
     gameTimeSeconds += 1; 
    } 

setInterval(addTime, 1000); 

if (gameTimeSeconds < 10) { 
    gameTime = gameTimeMinutes + " : 0" + gameTimeSeconds; 
} else { 
    gameTime = gameTimeMinutes + " : " + gameTimeSeconds; 
} 

if (gameTimeSeconds == 60) { 
    gameTimeSeconds = 0; 
    gameTimeMinutes++; 
} 

    graph.strokeText(gameTime, 50, 50); 
    graph.fillText(gameTime, 50, 50); 
} 

ありがとうございます。

Answer 1

setInterval(addTime, 1000)は毎秒addTimeを呼び出しますが、タイマーが再描画されないため何も起こりません。 drawTimerを呼び出してタイマーを再描画できますが、すべてのタイマーデータはdrawTimer関数内にあります。

drawTimerを複数回呼び出すことは、各呼び出しですべての値がリセットされているため、どちらも役に立ちません。これを解決するには、グローバル変数と関数を使用してタイマ状態（gameTimeMinutes,gameTimeSecondsおよびgameTime）を管理しますが、おそらくオブジェクトを使用します。あなたはオブジェクトhereの詳細を読むことができます。

この例では、GameTimerオブジェクトが作成されます。 GameTimerは関数によって定義され、newキーワードを使用してオブジェクトを作成するまでは何も行いません。オブジェクトgameTimer.addTime()、gameTimer.draw()の関数を呼び出すことによって、addTimeまたはdrawを呼び出すことができます。あるいは、の機能で両方を行うことができます。これは、setIntervalで起こることです。

var canvas = document.getElementById("canvas"); 
 
var graph = canvas.getContext("2d"); 
 
var playerConfig = { 
 
    textBorderSize: 3, 
 
    textColor: "white", 
 
    textBorder: "black" 
 
} 
 

 
function GameTimer() { 
 
    var gameTimeMinutes = 0; 
 
    var gameTimeSeconds = 0; 
 
    var gameTime = ""; 
 
    
 
    this.addTime = function() { 
 
    gameTimeSeconds += 1; 
 
    if (gameTimeSeconds < 10) { 
 
     gameTime = gameTimeMinutes + " : 0" + gameTimeSeconds; 
 
    } else { 
 
     gameTime = gameTimeMinutes + " : " + gameTimeSeconds; 
 
    } 
 

 
    if (gameTimeSeconds == 60) { 
 
     gameTimeSeconds = 0; 
 
     gameTimeMinutes++; 
 
    } 
 
    }; 
 
    
 
    this.draw = function() { 
 
    graph.clearRect(0, 0, canvas.width, canvas.height); 
 
    var fontSize = 15; 
 
    graph.lineWidth = playerConfig.textBorderSize; 
 
    graph.fillStyle = playerConfig.textColor; 
 
    graph.strokeStyle = playerConfig.textBorder; 
 
    graph.miterLimit = 1; 
 
    graph.lineJoin = 'round'; 
 
    graph.textAlign = 'right'; 
 
    graph.textBaseline = 'middle'; 
 
    graph.font = 'bold ' + fontSize + 'px sans-serif'; 
 
    graph.strokeText(gameTime, 60, 50); 
 
    graph.fillText(gameTime, 60, 50); 
 
    }; 
 
    
 
    this.update = function() { 
 
    this.addTime(); 
 
    this.draw(); 
 
    }.bind(this); 
 
    
 
    this.update(); 
 
} 
 

 
var gameTimer = new GameTimer(); 
 
setInterval(gameTimer.update, 1000);

<canvas id="canvas"></canvas>

Answer 2

addTime()は1秒ごとに呼び出されていますが、setInterval(addTime, 1000);が1回だけ実行されている行のコードのように見えます。つまり、変数gameTimeは一度しか設定されていません。あなたのロジックを再評価して、これらの変更（更新および印刷）をあなたの時間間隔に含める必要があります。