5

Пишу себе велосипед, кубик должен бесконечно двигаться вправо и возвращаться. Происходит только 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
  • 1
    по опыту скажу, что лучше не setInterval использовать, а рекурсивный setTimeout 14 мая 2017 в 19:09

1 ответ 1

4

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
    }
}
2
  • переменные animate_left и animate_right следует определять как setInterval или как то по-другому? Если определить их через setInterval они оба запускаются и начинают конфликтовать друг с другом и кубик на месте дергается. 15 мая 2017 в 13:03
  • Спасибо большое все заработало! 15 мая 2017 в 13:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.