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();
    }

函数preparePage（）{
var-box=document.getElementById（“box”）；
var-leftPosition=0；
box.style.position=“绝对”；
函数animateRight（）{
leftPosition+=1；
如果（leftPosition=0）{
leftPosition-=1；
box.style.left=leftPosition+“px”；
}否则{
console.log（“leftPosition=”，leftPosition）；
clearInterval（间隔左）；
设置间隔（animateRight，20）；
}
}
intervalRight=设置间隔（animateRight，20）；
}
window.onload=函数（）{
准备页（）；
}

您忘了将向右移动的间隔的句柄放入变量中。当您第二次开始向左移动时，它不会阻止当前区间向右移动，而是会再次尝试停止第一个区间

更改此项：

setInterval(animateRight,20);

进入：

---

. 起初，当它向左移动时，它开始移动得更快，然后它从一边跳到另一边，比预期的300像素远得多。谢谢！它现在运行得很好，但我承认我仍然不明白它为什么会这样。。。每次循环它都会越来越快地向左移动，并最终开始从窗口的一端跳到另一端，导致我的浏览器崩溃。每次框开始向左移动时，你都试图停止一个不再存在的间隔，然后开始另一个间隔。现在你有好几个时间间隔在争论这个盒子应该放在哪里，并且一直在开始更多的时间间隔，直到它使浏览器过载。再次感谢你，我想我现在明白了。我还发现如果我把leftPosition+=1；在if语句中，即使不设置句柄，它也可以正常工作，尽管后台有许多正在运行的计时器（令人惊讶的是，它对浏览器性能没有以前那样的影响）。如果我首先将迭代放在if语句中，我可能根本没有发现缺少句柄的问题……移动

leftPosition+=1

只会减少间隔冲突，并以较慢的速度启动新间隔，但浏览器最终仍会崩溃。

intervalRight = setInterval(animateRight,20);