有人可以告诉我为什么其中一种JavaScript代码有效而另一种无效吗？

Question

我希望动画在点击次数达到一定数量时停止播放。 为什么第一个代码段有效，而第二个代码段无效。 唯一的区别是调用clearInterval的位置。 这一项工作---停止动画。

var intervalId = setInterval(moveHeading, intervalLength);
var intervalLength = 120;
var clicks = 0; 
$("#heading").click(function () { 
    clearInterval(intervalId);  
    clicks++; 
    intervalLength /= 2;
    if (clicks >= 3) { 
      $("#heading").text("You Win!");
    } else {
      $("#heading").text(clicks);
      intervalId = setInterval(moveHeading, intervalLength);
    }
});

但是，这一个将不起作用---不会停止动画。

var intervalId = setInterval(moveHeading, intervalLength);
var intervalLength = 120;
var clicks = 0; 
$("#heading").click(function () {  
    clicks++; 
    intervalLength /= 2;
    if (clicks > 3) {
      clearInterval(intervalId); 
      $("#heading").text("You Win!");
    } else {
      $("#heading").text(clicks);
      intervalId = setInterval(moveHeading, intervalLength);
    }
});

Answer 1

在第一个方法上，先clearInterval ，然后在调用setInterval时覆盖intervalId ，因此永远不会有setInterval仍在运行，而不再需要intervalId 。

在第二个菜单上，如果clicks <= 3 ，则将覆盖intervalId ，但是您从未清除正在运行的setInterval ，因此它将继续运行，并且由于您不知道它的id而将永远无法对其清除clearInterval 。 （您将只能为创建的任何新间隔清除间隔）。

Answer 2

就像数字手表一样， setInterval()方法将每1秒执行一次该功能。 我们必须使用clearInterval()来停止时间。 它清除使用setInterval()方法设置的计时器。 您必须使用它才能停止动画。