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，如果它是退出的话。当循环完成后，您可以重置间隔。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

Answer 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>

Answer 3

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;