Javascript Clearinterval（）不'；t设置元素位置的动画

My

clearinterval（）

没有使用CSS中的

-200px

值设置元素正确位置的动画

//使用本机javascript
var元素=document.getElementById（'item'）；
var rightValue=-200；
var button=document.getElementById（'button'）；
var区间；
函数单击（）{
间隔=设置间隔（函数（）{
右值+=20
element.style.right=rightValue+“px”；
},10);
}
if（element.style.right==0）{
间隔时间；
}

首先，使用

setInterval

是不好的

为什么不使用

setInterval

？ 在某些情况下，函数可能需要比间隔时间更长的时间才能完成执行

使用

setInterval

是一种不好的做法，因为在上一次运行结束之前，可以多次调用该函数。该函数将同时运行多次

该怎么办？ 改为使用

setTimeout

，并在当前运行完成后调用下一次运行

var element=document.getElementById（'item'），
rightValue=-200，
button=document.getElementById（'button'），
定时器；
函数单击（）{
//防止多次点击
清除超时（计时器）；
右值+=20
element.style.right=rightValue+“px”；
//检查一下你是否需要再打一次
if（element.style.right！==0）{
//仅当此运行已完成时才设置下一次运行
定时器=设置超时（点击，10）；
}
}
单击（）；
}

这并不是清除间隔的最佳方法。您必须在循环间隔内清除它才能停止

function click(){
  interval = setInterval(function(){
    rightValue += 2;
    element.style.right = rightValue + "px";
    if(rightValue >= 0){
      clearInterval(interval);
    }
  },10);
}

编辑：

---

尽管这解决了您要求的问题，但正如@CodeWizard所指出的，这可能不是实现您所需的最佳方法。该按钮可能被多次单击，导致多个间隔同时运行。

对于此用户案例，requestFrameanimation如何？requestFrameanimation用于其他用途。它用于优化浏览器的重新绘制。您可以控制何时以及绘制什么。此事件在重新绘制完成之前执行。在这种情况下没有帮助。超时调用超时，这是我的首选方法