Блог

Я изучаю 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();
    }
  

Вы забыли поместить дескриптор для интервала перемещения прямо в переменную. Когда вы начнете двигаться влево во второй раз, это не остановит текущее значение inteval, идущее вправо, оно попытается снова остановить первый интервал.

Измените это:

 setInterval(animateRight,20);
  

в:

 intervalRight = setInterval(animateRight,20);