Таймер обратного отсчета не работает

Question

Таймер обратного отсчета, который я создал, не работает. Интересно, если я использую console.log для печати значения count - которое начинается с 3 - печатается что-то вроде -3498, даже если я нахожусь только около 15 секунд, поэтому должно быть что-то неправильно с набором интервал код. Отображается значение (если количество больше 0), но слишком часто изменяется интервал.

Вот код.

function countdown(){ 
    window_width=window.innerWidth-70; 
    window_height=window.innerHeight-150; 

    canvas = document.getElementById("gameCanvas"); 
    ctx=canvas.getContext("2d"); 
    canvas.width = window_width; 
    canvas.height=window_height; 

    if(count>0){ 
    ctx.font = '40pt Calibri'; 
    ctx.fillStyle = "white"; 
    ctx.fillText(count, window_width/3, window_height/2); 
    } 
    else if(count===0){ 
    ctx.fillText("Go!", window_width/3, window_height/2); 
    } 
    else{ 
    return; 
    } 

    setInterval(function(){count=count-1},1000); 
    requestAnimationFrame(countdown); 
} 

Любая помощь будет оценена по достоинству.

Answer 1

Я немного неясно, что вы пытаетесь достичь, но вот удар у него:

window.count = 3; 

setTimeout(countdown,1000); 

function countdown(){ 
    window_width=window.innerWidth-70; 
    window_height=window.innerHeight-150; 

    canvas = document.getElementById("gameCanvas"); 
    ctx=canvas.getContext("2d"); 
    canvas.width = window_width; 
    canvas.height=window_height; 

    count--; 

    if(count>0){ 
    ctx.font = '40pt Calibri'; 
    ctx.fillStyle = "white"; 
    ctx.fillText(count, window_width/3, window_height/2); 
    setTimeout(countdown,1000); 
    } 
    else if(count===0){ 
    ctx.fillText("Go!", window_width/3, window_height/2); 
    } 
    else{ 
    return; 
    } 

    requestAnimationFrame(countdown); // not sure if this is needed 
} 

Насколько я могу сказать, что вам не нужно интервал.

Answer 2

отображается значение, но изменяется слишком быстро

Вам нужно будет различать логики и представления. Когда вызывается функция countdown, вы назначаете функцию для уменьшения числа в 1 с и в то же время вы планируете вызывать countdown, чтобы вызывать его как можно быстрее. Интервал обновления холстов составляет около 16 мс, хотя ... Это означает, что count уменьшается с такой скоростью, только откладывается на 1 секунду после запуска.

И это еще хуже, так как вы использовали setInterval, который навсегда повторы уменьшая count, в то время как этот процесс запускается каждый кадр анимации ...

Решение не использовать setTimeout/setInterval вообще. Они ненадежны и не должны использоваться для измерения времени. Вместо этого, получить точные метки времени от Date object (каждый раз, когда они нужны вам, то есть каждый кадр анимации.):

var canvas = document.getElementById("gameCanvas"); 
var ctx = canvas.getContext("2d"); 
canvas.width = window.innerWidth -70; 
canvas.height = window.innerHeight-150; 
ctx.font = '40pt Calibri'; 
ctx.fillStyle = "white"; 

var count = …; 

var estimatedEnd = Date.now() + count*1000; 

function countdown(){ 
    var currentCount = (estimatedEnd - Date.now())/1000; 

    if (currentCount>0){ 
     ctx.fillText(currentCount, window_width/3, window_height/2); 
     requestAnimationFrame(countdown); 
    } else if (currentCount===0){ 
     ctx.fillText("Go!", window_width/3, window_height/2); 
    } 
} 
countdown();