Question

我创建的倒数计时器不起作用。有趣的是，如果我使用console.log打印count的值 - 从3开始 - 打印类似于-3498，即使我只打开了大约15秒，所以设置间隔一定有问题码。显示该值（如果count大于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();

倒数计时器不工作

2 个答案: