Javascript函数clearInterval不会停止动画答案

【问题标题】：Javascript function clearInterval does not stop animationJavascript函数clearInterval不会停止动画
【发布时间】：2018-02-07 13:30:02
【问题描述】：

当我使用setInterval 和clearInterval 单击按钮时，我正在旋转一个元素，当某个值为reached 时通过清除interval time t 来停止旋转。它运行良好，但是当我单击在当前动画完成之前一遍又一遍地重复相同的按钮，动画不再停止旋转。clearInterval 在这种情况下不起作用。

下面的代码说明了这一点：

var t; // interval 
var x = 0 ; // counter
var cal ; // element to be rotate

function prepareRotatesX(){
    x=x+5;
    cal =document.getElementById("myCalendar");
    cal.style.transform="rotateX("+x+"deg)";
    
    if(x>360){ clearInterval(t); x=0;}
}

function rotate(){
   
    t = setInterval(function(){ 
      prepareRotatesX();
    }, 10);
}

#myCalendar{ 
                position: absolute;
                top:45px;
                left:20px;
                border: 2px solid blue;
                width: 210px;
                height:170px;
                background-color:blue;
            }

<div id="myCalendar">
     <!---HERE COME CALENDAR -->
 </div>
 <!-- make rotation-->
 <button id='bnext' onclick='rotate();'>Rotation</button>

那么在这种情况下如何停止旋转呢？

【问题讨论】：

如果定义了t，请在单击按钮时调用clearInterval。
因为你覆盖了 t 而第一个仍在运行。所以逻辑说停止原来的，或者如果它已经在运行，不要再运行它。

标签： javascript setinterval clearinterval

【解决方案1】：

您可能需要的选项是它是否仍在运行而不是再次运行它。所以看看 t 是否被定义，如果它是退出。并且当循环完成后，您可以重置间隔。

var t; // interval 
var x = 0; // counter
var cal; // element to be rotate

function prepareRotatesX() {
  x = x + 5;
  cal = document.getElementById("myCalendar");
  cal.style.transform = "rotateX(" + x + "deg)";

  if (x > 360) {
    clearInterval(t);
    x = 0;
    t = null
  }
}

function rotate() {
  if (t) return;  // if t is defined, than it is running so exit
  t = setInterval(function() {
    prepareRotatesX();
  }, 10);
}

#myCalendar {
  position: absolute;
  top: 45px;
  left: 20px;
  border: 2px solid blue;
  width: 210px;
  height: 170px;
  background-color: blue;
}

<div id="myCalendar">
  <!---HERE COME CALENDAR -->
</div>
<!-- make rotation-->
<button id='bnext' onclick='rotate();'>Rotation</button>

其他选项是清除间隔并重新启动它

function rotate() {
  if (t) clearInterval(t)
  t = setInterval(function() {
    prepareRotatesX();
  }, 10);
}

【讨论】：

【解决方案2】：

如果您将t 移动到代码中的本地范围，全局声明的变量t 会产生问题。它应该可以解决您的问题（假设之前的点击轮换应该继续）

如果你想中止之前的点击，你可以按照@epascarello给出的解决方案

var x = 0 ; // counter
var cal ; // element to be rotate

function prepareRotatesX(t){
    x=x+5;
    cal =document.getElementById("myCalendar");
    cal.style.transform="rotateX("+x+"deg)";
    
    if(x>360){ clearInterval(t); x=0;}
}

function rotate(){
   var t; // interval 
    t = setInterval(function(){ 
      prepareRotatesX(t);
    }, 10);
}

#myCalendar{ 
                position: absolute;
                top:45px;
                left:20px;
                border: 2px solid blue;
                width: 210px;
                height:170px;
                background-color:blue;
            }

   <div id="myCalendar">
     <!---HERE COME CALENDAR -->
 </div>
 <!-- make rotation-->
 <button id='bnext' onclick='rotate();'>Rotation</button>

【讨论】：

【解决方案3】：

在单击时调用的旋转方法中，您需要进行更改以查看是否定义了间隔并清除它。请参阅下面的代码更新。

var t; // interval 
var x = 0 ; // counter
var cal ; // element to be rotate

function prepareRotatesX(){
    x=x+5;
    cal =document.getElementById("myCalendar");
    cal.style.transform="rotateX("+x+"deg)";
    
    if(x>360){ clearInterval(t); x=0;}
}

function rotate(){
    if(t !== undefined) {
        clearInterval(t);
    }
    t = setInterval(function(){ 
      prepareRotatesX();
    }, 10);
}

#myCalendar{ 
                position: absolute;
                top:45px;
                left:20px;
                border: 2px solid blue;
                width: 210px;
                height:170px;
                background-color:blue;
            }

<div id="myCalendar">
     <!---HERE COME CALENDAR -->
 </div>
 <!-- make rotation-->
 <button id='bnext' onclick='rotate();'>Rotation</button>

【讨论】：