简单区间不清除 [英] Simple Interval Not Clearing

问题描述

我正在用以下提示构建一个游戏程序：

修改挑战3，以便玩家每次点击标题而不是停止时，标题加快速度，使点击变得更加困难，跟踪标题被点击的次数，并更新标题文本以显示该数字，当玩家达到10次点击时，停止动画并更改文字标题为你赢。提示：为了加速，你必须取消当前的时间间隔，然后以较短的间隔时间开始一个新的时间。

这是点击事件本身。除了点击次数超过10次后，文字不会停止，所有内容都已全部放下。
$ b

  $（＃heading）。click（function（）{
 clearInterval（move）; 
 if（clicks< 10）
 {
 var move = setInterval（moveHeading，speed  -  = 2）; 
 $（＃heading）。 html（clicks +Clicks！）; 
 clicks ++; 
} 
 else 
 {
 $（＃heading）。html（You won！ ）; 
 $（＃heading）.css（color，red）; 
 clearInterval（move）; 
} 
}）; 
  

https://jsfiddle.net/jggzb49j/1/

解决方案

声明变量移动外部而不是内部处理函数

$ $ p $
$（＃heading）。click（function（）{
clearInterval（move）;
if（clicks< 10）{
move = setInterval（moveHeading，speed） - = 2）;
$（＃heading）。html（clicks +Clicks！）;
clicks ++;
} else {
$（＃heading ）.html（You won！）;
$（＃heading）。css（color，red）;
clearInterval（move）;
}
}）;

I am building a game program with the following prompt:

"Modify Challenge #3 so that every time a player clicks the heading, instead of stopping, the heading speeds up, making it harder and harder to click. Keep track of the number of times the heading has been clicked and update the heading text so it shows this number. When the player has reached 10 clicks, stop the animation and change the text of the heading to "You Win." Hint: To speed up, you’ll have to cancel the current interval and then start a new one with a shorter interval time."

Here is the click event itself. I have everything down except the text won't stop when there are more than 10 clicks. I have linked my jfiddle as well.

$("#heading").click(function() {
       clearInterval(move);
       if (clicks < 10)
       {
            var move = setInterval(moveHeading, speed -= 2);
            $("#heading").html(clicks + " Clicks!");
            clicks++;
       } 
       else 
       {
            $("#heading").html("You won!");
            $("#heading").css("color","red");
            clearInterval(move);
       }
 });

https://jsfiddle.net/jggzb49j/1/

解决方案

declare variable move outside instead of the inside handler function

var move;
$("#heading").click(function() {
  clearInterval(move);
  if (clicks < 10) {
    move = setInterval(moveHeading, speed -= 2);
    $("#heading").html(clicks + " Clicks!");
    clicks++;
  } else {
    $("#heading").html("You won!");
    $("#heading").css("color", "red");
    clearInterval(move);
  }
});

这篇关于简单区间不清除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！