私はボックスを左から右に移動しようとしますが、数サイクル後にクラッシュします。

Question

私はJavaScriptを学習しています。私の演習の1つは、ボックスを左から右に移動することでした。最初の数サイクルはうまくいきますが、それが乱雑になり、何が原因か分かりません。

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

Answer 1

変数を右に動かすためにハンドルを置くのを忘れました。 2度目の左への移動を開始すると、現在の緯度が右に進むのを止めることはなく、再び最初の間隔を停止しようとします。

変更この：

setInterval(animateRight,20); 

へ：

intervalRight = setInterval(animateRight,20);