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

Question

在我的函数中，我用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);

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

我在这里寻找类似回调的解决方案，但不希望切换到animation方法。

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

Answer 1

这对你有用吗？

window.requestAnimFrame = (function () {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();
var winWidth=$(window).width();
var myBox=$('.box');
var toggler=$('.toggler');
toggler.on('click',toggle);
myBox.isMoving=false;
myBox.timeoutID=null;
requestAnimFrame(render);
function render(){
    requestAnimFrame(render);
    moveBox();
}
function moveBox(){
    if(myBox.isMoving){
        myBox.css({left:'+=5'});
        if(myBox[0].getBoundingClientRect().left>winWidth){
            myBox.isMoving=false;
            clearTimeout(myBox.timeoutID);
            myBox.timeoutID=setTimeout(function(){myBox.isMoving=true;},1000);
            myBox.css({left:0});
        }
    }
}
function toggle(){
    myBox.isMoving=!myBox.isMoving;
    if(!myBox.isMoving){clearTimeout(myBox.timeoutID);}
}

html, body {
    margin: 0;
    padding: 0;
}
.box {
    position: relative;
    left: 0;
    margin: 10px 0;
    background: #cc0;
    width: 20px;
    height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="box">&nbsp;</div>
<input class="toggler" type="button" value="Toggle" />