Страницы

Поиск по вопросам

понедельник, 26 ноября 2018 г.

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

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


Ответ

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 } }

Комментариев нет:

Отправить комментарий