#javascript
#javascript
Вопрос:
Я изучаю javascript, и одним из моих упражнений было перемещение поля слева направо. Первые несколько циклов работает нормально, но затем становится беспорядочно, и я понятия не имею, что является причиной этого.
function preparePage(){
var box = document.getElementById("box");
var leftPosition = 0;
box.style.position = "absolute";
function animateRight(){
leftPosition = 1;
if (leftPosition<=300){
box.style.left = leftPosition "px";
} else {
console.log("leftPosition = ",leftPosition);
clearInterval(intervalRight);
intervalLeft = setInterval(animateLeft, 20);
}
}
function animateLeft(){
if (leftPosition>=0){
leftPosition -=1;
box.style.left = leftPosition "px";
} else {
console.log("leftPosition =", leftPosition);
clearInterval(intervalLeft);
setInterval(animateRight,20);
}
}
intervalRight = setInterval(animateRight,20);
}
window.onload = function(){
preparePage();
}
Комментарии:
1. Вот полный код . Сначала оно начинает двигаться быстрее, когда идет влево, затем оно перескакивает с одной стороны на другую и намного дальше, чем предполагалось, на 300 пикселей.
Ответ №1:
Вы забыли поместить дескриптор для интервала перемещения прямо в переменную. Когда вы начнете двигаться влево во второй раз, это не остановит текущее значение inteval, идущее вправо, оно попытается снова остановить первый интервал.
Измените это:
setInterval(animateRight,20);
в:
intervalRight = setInterval(animateRight,20);
Комментарии:
1. Спасибо! Сейчас это работает отлично, но, признаюсь, я все еще не понимаю, почему оно действовало таким образом… С каждым циклом оно перемещалось все быстрее и быстрее влево и, в конце концов, начало перепрыгивать с одного конца окна на другой, что привело к сбою моего браузера.
2. Каждый раз, когда поле начинало перемещаться влево, вы пытались остановить интервал, которого больше не существовало, и запускали другой интервал. Теперь у вас есть несколько интервалов, в которых вы боретесь за то, куда должно быть помещено окно, и все время запускаете новые интервалы, пока это не перегрузит браузер.
3. Еще раз спасибо, думаю, теперь я это понимаю. Я также обнаружил, что если я помещаю leftPosition = 1; в оператор if, он отлично работает даже без установки дескриптора, хотя в фоновом режиме работает много таймеров (что, что удивительно, не оказывает такого влияния на производительность браузера, как раньше). Возможно, я вообще не узнал бы о проблеме с отсутствующим дескриптором, если бы изначально поместил итерацию в оператор if…
4. Перемещение
leftPosition = 1;
просто уменьшит количество интервалов и начнет новые интервалы с меньшей скоростью, но браузер все равно в конечном итоге вылетит.