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

#javascript #анимация

Пишу себе велосипед, кубик должен бесконечно двигаться вправо и возвращаться.
Происходит только 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);
    }
}   

    

Ответы

Ответ 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
    }
}