Question

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

<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

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

2 个答案: