javascript - JavaScript动画在每次迭代中都会错误地将元素的“pos”变量

对于包含云图像的元素，以下JavaScript动画中的逻辑错误到底是什么？我认为“ pos”变量似乎在每次迭代中都相去甚远，我无法弄清楚每次迭代时云图像的运动如何变得越来越疯狂。

//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>

最佳答案

通过使用setInterval，您告诉JavaScript每n毫秒重复一次该函数，因此，使用间隔调用函数来创建更多间隔的方法实际上实际上是更频繁地调用您的位置更改。

建议您查看setTimeout()而不是setInterval()，以确保您不会重复创建更多间隔。

编辑：再看一下代码后，保留clearInterval()并记住也将其放入remotion基本案例中；否则，您将像我上面提到的那样开始以指数方式创建更多间隔。