Почему третья функция передвигает объект быстрее двух предыдущих функций?

Question

[Cryezidl]

Изучаю JS и столкнулся с проблемой. Пытаюсь заставить красный квадрат перемещаться вдоль каждой стороны зеленого. Первые две функции (направо и вниз) работаю хорошо, но третья слишком быстрая, хотя значения стоят одни и те же. Думал, что проблема в самом перемещении влево, но поменяв порядок выполнения функций увидел, что траббл именно с 3 функцией, т-к перемещение вниз тоже ускорилось.
Вот код

window.onload = function () {
    let cube = document.getElementById("cube");
    let x = 0;
    let y = 0;
    let xr = 0;
    let iX = setInterval(moveX, 5)
    function moveX() {
        if (x >= 200) {
            clearInterval(iX);
            let iY = setInterval(moveY, 5);
        }
        else {
            x++;
            xr++;
            cube.style.left = x+"px";
        }
    }; 
    function moveY() {
        if (y >= 200) {
            clearInterval(window.iY);
            let iMINX = setInterval(moveMINX, 5); 
        }
        else {
            y++;
            cube.style.top = y+"px";
        }
    };
    function moveMINX() {
        if (xr <= 0) {
            clearInterval(window.iMINX)
        }
        else {
            xr -= 1;
            cube.style.left = xr + "px";
        }
    }
};

#cube {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
}
#cib {
    width: 300px;
    height: 300px;
    background-color: green;
    position: relative; 
}

Comments

[Юрий Матрос]

Проблема заключается в том, что при запуске функции moveY(), вы создаете новый интервал, используя переменную iY, но при очистке интервала внутри moveX(), вы используете window.iY. Таким образом, переменная iY остается неопределенной и при запуске следующей функции moveMINX(), она не может быть очищена, что приводит к ускорению движения объекта.

Чтобы исправить эту проблему, замените window.iY на iY при очистке интервала в функции moveX().

window.onload = function () {
    let cube = document.getElementById("cube");
    let x = 0;
    let y = 0;
    let xr = 0;
    let iX = setInterval(moveX, 5)
    function moveX() {
        if (x >= 200) {
            clearInterval(iX);
            let iY = setInterval(moveY, 5);
        }
        else {
            x++;
            xr++;
            cube.style.left = x+"px";
        }
    }; 
    function moveY() {
        if (y >= 200) {
            clearInterval(iY);
            let iMINX = setInterval(moveMINX, 5); 
        }
        else {
            y++;
            cube.style.top = y+"px";
        }
    };
    function moveMINX() {
        if (xr <= 0) {
            clearInterval(iMINX)
        }
        else {
            xr -= 1;
            cube.style.left = xr + "px";
        }
    }
};

[WbICHA]

Потому что ты создаёшь новый интервал с вызовом третьей каждые 5мс. Интервалы чистить надо, а не андефайнды.

[WbICHA]

Юрий Матрос, так-то всё верно написал, но действительно считаешь, что хоть как-то исправил проблему?

[Юрий Матрос]

WbICHA, Был бы уверен в правильности - разместил бы в ответах))

[Cryezidl]

Спасибо всем, кто окликлнулся. Понял, в какую сторону нужно смотреть, и проблема решилась.