Как зациклить анимацию (setInterval)

356

16 мая 2017, 04:29

Пишу себе велосипед, кубик должен бесконечно двигаться вправо и возвращаться. Происходит только 1 итерация.Если добавить в left_go() в else if{ setInterval(right_go, 5);} , все работает, но со временем анимация начинает тормозить и зависать. Помогите пожауйста?

var animate_right = setInterval(right_go, 5);
function right_go () {
    var left_padding = cube_style.left;
    if (left_padding!=width_square){
        cube.style.left = x +"px";
        x++;
        console.log(left_padding);
    }
    else if(left_padding=width_square){
        clearInterval(animate_right);
        var animate_left = setInterval(left_go, 5);
    }
}
function left_go (animate_left) {
    var left_padding = cube_style.left;
    if (left_padding!='-1px'){
        cube.style.left = x +"px";
        x--;
        console.log(left_padding);
    }
    else if(left_padding!=width_square){
        clearInterval(animate_left);
    }
}

Answer 1

Oбе переменные, animate_left и animate_right, должны быть глобальными, а у Вас clearInterval(animate_left); ничего не делает, так как переменная animate_left в этом месте неопределена. Соответственно, таймеры с left_go через каждые 5 миллисекунд накапливаются, и все тормозит.

Код должен быть симметричен относительно left и right.

var animate_right = setInterval(right_go, 5);
var animate_left = null;
function right_go () {
    var left_padding = cube_style.left;
    if (left_padding!=width_square){
        cube.style.left = x +"px";
        x++;
        console.log(left_padding);
    }
    else if(left_padding=width_square){
        clearInterval(animate_right);
        animate_left = setInterval(left_go, 5); // !!! no var
    }
}