Встроить обратный вызов jquery в функцию requestAnimationFrame для интервалов

В моей функции я анимирую движение div слева направо с помощью requestAnimationFrame.

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 мс всегда после ее завершения?


jquery css requestanimationframe jquery-callback
person ben_aaron    schedule 16.04.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это работает для вас?

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" />

person Tahir Ahmed    schedule 08.06.2015
comment
Спасибо, что нашли время. Я постараюсь и дам вам знать. - person ben_aaron; 09.06.2015