Javascript 函数 clearInterval 不停止动画

Question

当我使用 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>

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

Answer 1

如果您将 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>

Answer 2

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

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>

Answer 3

您可能需要的选项是，如果它仍然运行ning，则不要再次运行。所以看t有没有定义，如果是exit。循环完成后，您可以重置间隔。

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);
}

Javascript 函数 clearInterval 不停止动画

Javascript function clearInterval does not stop animation

javascript

setinterval

clearinterval