Javascript函数clearInterval不会停止动画

当通过清除间隔时间t达到某个值时，我使用setInterval和clearInterval单击按钮以停止旋转时，我正在旋转一个元素。它工作正常，但当我在当前动画完成之前反复单击同一按钮时，动画不再停止旋转。在这种情况下，clearInterval不起作用

下面的代码对此进行了说明：

变量t；//间隔 变量x=0；//柜台 var-cal；//要旋转的元素 函数prepareRotatesX{ x=x+5； cal=document.getElementByIdmyCalendar； 校准样式变换=旋转x+deg； ifx>360{clearIntervalt；x=0；} } 函数旋转{ t=setIntervalfunction{ 预聚酸盐； }, 10; } 我的日历{ 位置：绝对位置； 顶部：45px； 左：20px； 边框：2件纯蓝； 宽度：210px； 高度：170px； 背景颜色：蓝色； } 若在代码中将t移到局部范围，则全局声明的变量t会产生问题。假设之前的单击旋转应该继续，它应该可以解决您的问题

如果要中止上一次单击，可以按照@epascarello给出的解决方案进行操作

变量x=0；//柜台 var-cal；//要旋转的元素 函数prepareRotatesXt{ x=x+5； cal=document.getElementByIdmyCalendar； 校准样式变换=旋转x+deg； ifx>360{clearIntervalt；x=0；} } 函数旋转{ var t；//间隔 t=setIntervalfunction{ 制备酸盐； }, 10; } 我的日历{ 位置：绝对位置； 顶部：45px； 左：20px； 边框：2件纯蓝； 宽度：210px； 高度：170px； 背景颜色：蓝色； }

---

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

变量t；//间隔 变量x=0；//柜台 var-cal；//要旋转的元素 函数prepareRotatesX{ x=x+5； cal=document.getElementByIdmyCalendar； 校准样式变换=旋转x+deg； ifx>360{clearIntervalt；x=0；} } 函数旋转{ ift！==未定义{ 明确间隔； } t=setIntervalfunction{ 预聚酸盐； }, 10; } 我的日历{ 位置：绝对位置； 顶部：45px； 左：20px； 边框：2件纯蓝； 宽度：210px； 高度：170px； 背景颜色：蓝色； }

---

您可能追求的选项是，如果它仍在运行，则不要再次运行它。所以看看t是否被定义，它是否是exit。循环完成后，可以重置间隔

变量t；//间隔 变量x=0；//柜台 var-cal；//要旋转的元素 函数prepareRotatesX{ x=x+5； cal=document.getElementByIdmyCalendar； cal.style.transform=rotateX+x+deg； 如果x>360{ 明确间隔； x=0； t=null } } 函数旋转{ if t return；//如果定义了t，则它正在运行，因此退出 t=设置间隔函数{ 预聚酸盐； }, 10; } 我的日历{ 位置：绝对位置； 顶部：45px； 左：20px； 边框：2件纯蓝； 宽度：210px； 高度：170px； 背景颜色：蓝色； }

---

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