将jquery回调构建到requestAnimationFrame函数中，用于间隔

在我的函数中，我使用

requestAnimationFrame

设置div从左向右移动的动画

move_right =  function(object){
  movement_right_ID = requestAnimationFrame(function(){
    move_right(object)  
});
    $(object).css({
         left: "+=5"
     })
     get_boundary(object) //this is another function that gives me the div boundaries and returns object_left
     if(object_left > $(window).width()){
         cancelAnimationFrame(movement_right_ID);
         $(object).css({
             left: "-100%"
         })
     }
}

此函数按我的要求运行，即从左向右平滑移动div，并将其重置到左侧位置

但是，我的问题是，我想将整个动画运行几次：

当我使用

setInterval(function(){
        move_right($("#div1"))
    }, 1000);

我有一个问题，它在启动后不久就不同步了。我怀疑这是由于动画在想要再次运行时没有完成

我在这里寻找一个类似回调的解决方案，但我不想切换到

动画

方法

---

那么，我如何更改代码，使其始终在函数完成后以1000毫秒的间隔运行函数呢？

这对您有用吗

window.requestAnimFrame=（函数（）{
返回window.requestAnimationFrame | | | window.webkitRequestAnimationFrame | | | window.mozRequestAnimationFrame | |函数（回调）{
设置超时（回调，1000/60）；
};
})();
var winWidth=$（window.width（）；
var myBox=$（'.box'）；
var-toggler=$（'.toggler'）；
切换器打开（“单击”，切换）；
myBox.isMoving=false；
myBox.timeoutID=null；
请求帧（渲染）；
函数render（）{
请求帧（渲染）；
moveBox（）；
}
函数moveBox（）{
如果（myBox.isMoving）{
css（{左：'+=5'}）；
如果（myBox[0].getBoundingClientRect（）.left>winWidth）{
myBox.isMoving=false；
clearTimeout（myBox.timeoutID）；
myBox.timeoutID=setTimeout（函数（）{myBox.isMoving=true；}，1000）；
css（{左：0}）；
}
}
}
函数切换（）{
myBox.isMoving=！myBox.isMoving；
如果（！myBox.isMoving）{clearTimeout（myBox.timeoutID）；}
}

html，正文{
保证金：0；
填充：0；
}
.盒子{
位置：相对位置；
左：0；
利润率：10px0；
背景：#cc0；
宽度：20px；
高度：20px；
}

---

感谢您抽出时间。我会尽力让你知道的。