Question

我正在学习jQuery动画功能并创建一个小游戏，用户必须在设定的时间范围内点击移动的div。游戏是写入的，以便当时间到时，显示最终得分并且div给予用户选择“再次开始”＃34;如果用户点击它。

问题在于游戏开始时显示的计时器。时间准确但显示不准。

对于一个示例母鸡页面加载，即使在[{1}}

中调用它首先调用它，计时器也是最后显示的东西

通过调试我确认了这一点，$(document).ready()首先出现了$("#time-remaining").text((seconds -= 1) + " seconds");。

这是显示问题的JSFiddle

除了在调试模式下确认在任何其他视觉显示之前首先调用setInterval()之外，我还没有想到为什么在执行第一件事时计时器的显示落后于其他所有内容

Answer 1

因为您的间隔不会立即开始，所以会延迟1000毫秒。

您可以在间隔之外更新一次文本。

...
$("#time-remaining").text(seconds + " seconds");
// Countdown timer
var timer = setInterval(function(){
    $("#time-remaining").text((seconds -= 1)  + " seconds");
    if(seconds <= 0){
        clearInterval(timer);
        GameOver(points);
    }
}, 1000);
...

jQuery：.text（）被延迟了

1 个答案: