Question

我的游戏非常简单，你应该点击开始按钮并沿着轨道移动鼠标直到你到达终点。最后，计时器停止并显示您的分数。我的问题在于计时器。第一次计时器工作完全正常但是当你点击重置再次播放时它只调用一次间隔。为什么呢？

链接到我的完整代码：http://www.codecademy.com/TictacTactic/codebits/AQBK4L/edit

提前谢谢！

JAVA SCRIPT

var clicked = false;
var score = 1000;
var timer = setInterval(function(){countDown()}, 250);

$(document).ready(function() {
$('#start').click(function() {
if(!clicked){
    clicked = true;
    countDown();
}
});

$("#lava").mouseover(function(){
if(clicked){
    stopTimer();
    score = 0;
    $("#points").html(score);
}
});

$("#end").mouseover(function(){
if(clicked){
    stopTimer();
    $("#points").html(score);
    clicked = false;
}
});

$('#reset').click(function() {
if(clicked || !clicked){
    clicked = false;
    score = 1000;
    $('#points').html(score);
}
});

});

function countDown() {
score = score - 1;
}

function stopTimer() {
clearInterval(timer);
}

Answer 1

您的代码var timer = setInterval(function(){countDown()}, 250);位于顶部，将在方法加载之前执行。在ready()的末尾添加，请查看底部：

var clicked = false;
var score = 1000;
var timer = null;

$(document).ready(function() {
  $('#start').click(function() {

  if(!clicked){
    clicked = true;
    score = 1000;
    timer = setInterval(function(){countDown()}, 250);
    //countDown();
   }
  });

 $("#lava").mouseover(function(){
   if(clicked){
    stopTimer();
    score = 0;
    $("#points").html(score);
   }
 });

 $("#end").mouseover(function(){
   if(clicked){
    stopTimer();
    $("#points").html(score);
    clicked = false;
   }
});

 $('#reset').click(function() {
  if(clicked || !clicked){
    clicked = false;
    score = 1000;
    $('#points').html(score);
  }
});



});

function countDown() {
  score = score - 1;
  $('#points').html(score);
  }

function stopTimer() {
  clearInterval(timer);
  }

将clearInterval应用于某个时间间隔后，为什么在调用时该间隔不会再次起作用？

1 个答案: