Javascript setInterval 타이머가 작동하지 않습니까?

Question

나는 그려지는 타이머를 가지고 있지만 전혀 변하지 않습니다. 0 : 01로 표시되며 두 번째로 추가되지 않습니다. 이것은 아마도 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); 코드는 한 번만 실행됩니다. 즉, 변수 gameTime은 한 번만 설정됩니다. 귀하의 논리를 재평가하여 해당 변경 사항을 업데이트하고 인쇄하십시오.