JavaScriptアニメーション反復ごとに要素の間違った "pos"変数

Question

クラウドイメージを含む要素のアニメーションに対して、次のJavaScriptの論理エラーはどうなりますか？私は "pos"変数が各反復で途絶えるように思うし、各反復でクラウドイメージの動きがますます狂っていく様子を把握することはできません。あなたがその機能にnミリ秒ごとに繰り返すようにJavaScriptを言っているsetIntervalを使用して、そう実際にあなたの位置は、より頻繁に変化呼んでいるより多くの間隔を作成する関数を呼び出す間隔を有することにより

//CSS: 
#container{ 
       background-color : #defffc; 
       width : 100%; 
       height : 100%; 
       position : relative; 
      } 

#clouds{ 
      position : absolute; 
      width : 300px; 
      height : 200px; 
      opacity : 0.3; 
     } 

//Body: 
<p><button type = "button" onclick = "animateCloud()">Move Cloud</button></p> 
    <div id = "container"> 
     <div id = "cloudy"> 
      <img src ="cloudy.png" id = "clouds"></img> 
     </div> 
    </div> 

//Script: 
<script> 
     function animateCloud(){ 
      var pos = 0; 
      var cloudElement = document.getElementById("clouds"); 
      var id = setInterval(motion, 5); 

      function motion(){ 
       if(pos==1000){ 
        //clearInterval(id); 
        id = setInterval(remotion, 5, pos); 
       } 
       else{ 
         pos++; 
         cloudElement.style.left = pos + 'px'; 
         cloudElement.style.right = pos + 'px'; 
        } 
       } 

       function remotion(){ 
       alert(pos); 
        if(pos==0){ 
          id = setInterval(motion, 5, pos); 
        } 
        else{ 
          pos--; 
          cloudElement.style.right = pos + 'px'; 
          cloudElement.style.left = pos + 'px'; 
        } 
       } 
      } 
</script> 

Answer 1

。

setTimeout()をsetInterval()より多く見ると、より多くの間隔を繰り返し作成していないことを確認することをお勧めします。

編集：コードをもう一度見て、clearInterval()のままにしておき、それをremotionベースケースに入れてください。そうでなければ、私は上記のように指数関数的に間隔を広げます。