javascript - 无法启动和停止持续循环运行的动画

Question

为了简化这个问题，我创建了两个 div:当您单击橙色框时，其下方的蓝色框将连续循环地前后移动。我想要做的是:

• 点击橙色框开始和停止蓝色框循环
• 启动和停止后，蓝色框将停止并每次从停止处继续。

我已经尝试了几乎所有方法，但无法使其工作。任何建议将不胜感激。

var hoverSlideBox = document.getElementById("hover_slide_box");
var slidingBox = document.getElementById("sliding_box");

hoverSlideBox.onclick = function() {
  var pos = 0;
  var moveLeft = false;
  var stopAnimate = false;

  init();

  function init() {
    setInterval(boxRight, 5);
  }

  function boxRight() {
    if (!moveLeft) {
      pos++;
      slidingBox.style.left = pos + 'px';
    }
    if (pos == 500 || moveLeft) {
      moveLeft = true;
      boxLeft();
    }
  }

  function boxLeft() {
    if (moveLeft) {
      pos--;
      slidingBox.style.left = pos + 'px';
    }
    if (pos == 0 || !moveLeft) {
      moveLeft = false;
    }
  }

}

<div id="hover_slide_box" style="background-color: #ff931e; cursor: pointer; position: absolute; height: 100px; width: 100px;"></div>
<div id="sliding_box" style="top: 120px; background-color: #0071bc; cursor: pointer; position: absolute; height: 100px; width: 100px;"></div>

Answer 1

您需要将一些变量移出 onclick 函数，以便每次单击橙色框时它们都不会重置。它与 clearInterval 一起为您提供一个开始/停止按钮。

var hoverSlideBox = document.getElementById("hover_slide_box");
var slidingBox = document.getElementById("sliding_box");
var running = false;
var intervalId;
var pos = 0;
var moveLeft = false;

hoverSlideBox.onclick = function() {

  init();

  function init() {
    if (!running) {
      intervalId = setInterval(boxRight, 5);
      running = true;
    } else {
      clearInterval(intervalId);
      running = false;
    }
  }

  function boxRight() {
    if (!moveLeft) {
      pos++;
      slidingBox.style.left = pos + 'px';
    }
    if (pos == 500 || moveLeft) {
      moveLeft = true;
      boxLeft();
    }
  }

  function boxLeft() {
    if (moveLeft) {
      pos--;
      slidingBox.style.left = pos + 'px';
    }
    if (pos == 0 || !moveLeft) {
      moveLeft = false;
    }
  }

}

<div id="hover_slide_box" style="background-color: #ff931e; cursor: pointer; position: absolute; height: 100px; width: 100px;"></div>
<div id="sliding_box" style="top: 120px; background-color: #0071bc; cursor: pointer; position: absolute; height: 100px; width: 100px;"></div>