到达某个位置时如何激活间隔？

Question

问题是它同时调用了var intervalLeft和intervaRight 。 当它向右移动时，我希望intervalLeft不起作用，反之亦然。 当到达startPosition 100时，它将激活intervalLeft ；当到达startPosition 0时，它将激活intervalRight infinite。

<div id="moveAnimation" class="block"></div>
</div>
<script>
  var elem = document.getElementById("moveAnimation");
  elem.addEventListener("click", movingImage);

  function movingImage() {
    var startPosition = 0;
    var intervalRight = setInterval(frameRight, 10);
    var intervalLeft = setInterval(frameLeft, 10);

    function frameRight() {
      if (startPosition >= 100) {
        clearInterval(intervalRight);
        frameLeft();
      } else {
        startPosition += 0.5;
        document.getElementById("moveAnimation").style.left = startPosition + "%";
      }
    }

    function frameLeft() {
      if (startPosition <= 0) {
        clearInterval(intervalRight);
        frameRight();
      } else {
        startPosition -= 2;
        document.getElementById("moveAnimation").style.right = startPosition + "%";
      }
    }
  }
</script>

这是练习：

在此下方，您需要使用JS进行运动的div左右移动。 使它在2秒内到达终点，然后在5秒钟内返回。 重复一遍。

Answer 1

更新了您的代码。 在下面使用

<div id="moveAnimation" class="block"></div>
    </div>
    <script>
    var elem = document.getElementById("moveAnimation");
        elem.addEventListener("click", movingImage);



        function movingImage() {
            var startPosition = 0;
            var intervalRight = setInterval(frameRight, 10);
            var rightTimer = true;
            var leftTimer = false;
            var intervalLeft;

            function frameRight() {
                if(!rightTimer){
                    rightTimer = true;
                    intervalRight = setInterval(frameRight,10)
                    return;
                }
                if (startPosition >= 100) {
                    rightTimer = false;
                    clearInterval(intervalRight);
                    frameLeft();

                } else {

                    startPosition += 0.5;
                    document.getElementById("moveAnimation").style.left        =     startPosition + "%";
                }

            }

            function frameLeft() {
                if(!leftTimer){
                    leftTimer = true;
                    intervalLeft = setInterval(frameLeft,10)
                    return;
                }
                if (startPosition <= 0) {
                    leftTimer = false;
                    clearInterval(intervalLeft);
                    frameRight();

                } else {

                    startPosition -= 2;
                      document.getElementById("moveAnimation").style.left = startPosition + "%";
                }
            }
        }
    </script>

Answer 2

经过更多测试之后，我发现用更少的代码行就能找到答案。

var elem = document.getElementById("moveAnimation");
            elem.addEventListener("click", movingImage);

            function movingImage() {
                var startPosition = 0;
                var intervalRight = setInterval(frameRight, 10); //1 





                function frameRight() {
                    if (startPosition >= 100) {
                        clearInterval(intervalRight);
                        intervalLeft = setInterval(frameLeft, 10);


                    } else {
                        startPosition += 0.5;
                        document.getElementById("moveAnimation").style.left =    startPosition + "%";
                    }

                }

                function frameLeft() {
                    if (startPosition <= 0) {
                        clearInterval(intervalLeft);
                        intervalRight = setInterval(frameRight, 10);

                    } else {
                        startPosition -= 0.2;
                        document.getElementById("moveAnimation").style.left = startPosition + "%";
                    }
                }
            }
        </script>

这应该如何工作。 在我发布的原始代码中，clearInterval未链接到实际的intervalID