Question

有人可以帮我吗？ JS新手在这里。我无法停止h1随点击移动。点击后，它开始缓慢移动两次。我也尝试通过jQuery来做到这一点，但它也不起作用。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Interactive Programming</title>
</head>

<body>
  <h1 id="heading">Hello,world!</h1>
  <script src="https://code.jquery.com/jquery-2.1.0.js">
  </script>
  <script>
    var leftOffset = 0;
    var topOffset = 0;
    var moveHeading = function() {
      $("#heading").offset({
        left: leftOffset,
        top: topOffset
      });
      if (leftOffset < 200 && topOffset == 0) {
        leftOffset++;
      } else if (leftOffset == 200 && topOffset < 200) {
        topOffset++;
        leftOffset = 200;
      } else if (topOffset == 200 && leftOffset > 0) {
        leftOffset--
      } else if (leftOffset == 0 && topOffset > 0) {
        topOffset--;
      }


    };
    setInterval(moveHeading, 30);

    var heading = document.getElementById("heading");
    var intervalId = setInterval(moveHeading, 30);
    var stopMovement = function() {
      clearInterval(intervalId);
    };
    heading.addEventListener("click", stopMovement);
  </script>
</body>

</html>

Answer 1

啊，我喜欢删除代码来解决问题。在这种情况下，删除对setInterval(moveHeading, 30)的第一次调用即可解决此问题。它被两次调用。只需离开var intervalId = setInterval(moveHeading, 30);就可以了。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Interactive Programming</title>
</head>

<body>
  <h1 id="heading">Hello,world!</h1>
  <script src="https://code.jquery.com/jquery-2.1.0.js">
  </script>
  <script>
    var leftOffset = 0;
    var topOffset = 0;
    var moveHeading = function() {
      $("#heading").offset({
        left: leftOffset,
        top: topOffset
      });
      if (leftOffset < 200 && topOffset == 0) {
        leftOffset++;
      } else if (leftOffset == 200 && topOffset < 200) {
        topOffset++;
        leftOffset = 200;
      } else if (topOffset == 200 && leftOffset > 0) {
        leftOffset--
      } else if (leftOffset == 0 && topOffset > 0) {
        topOffset--;
      }


    };
    var heading = document.getElementById("heading");
    var intervalId = setInterval(moveHeading, 30);
    var stopMovement = function() {
      clearInterval(intervalId);
    };
    heading.addEventListener("click", stopMovement);
  </script>
</body>

</html>

Answer 2

您的问题在于：

setInterval(moveHeading, 30);

您稍后在代码中将其设置为intervalId：

var intervalId = setInterval(moveHeading, 30);

因此，您的clearInterval仅停止间隔intervalId，但不会停止您的第一个间隔，因此您的标题一直在移动。

请参见下面的工作示例：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Interactive Programming</title>
</head>

<body>
  <h1 id="heading">Hello,world!</h1>
  <script src="https://code.jquery.com/jquery-2.1.0.js">
  </script>
  <script>
    var leftOffset = 0;
    var topOffset = 0;
    var moveHeading = function() {
      $("#heading").offset({
        left: leftOffset,
        top: topOffset
      });
      if (leftOffset < 200 && topOffset == 0) {
        leftOffset++;
      } else if (leftOffset == 200 && topOffset < 200) {
        topOffset++;
        leftOffset = 200;
      } else if (topOffset == 200 && leftOffset > 0) {
        leftOffset--
      } else if (leftOffset == 0 && topOffset > 0) {
        topOffset--;
      }


    };
    // Remove this: setInterval(moveHeading, 30);

    var heading = document.getElementById("heading");
    var intervalId = setInterval(moveHeading, 15);
    var stopMovement = function() {
      clearInterval(intervalId);
    };
    heading.addEventListener("click", stopMovement);
  </script>
</body>

</html>

注意：您会注意到移动的速度现在变慢，这是因为您只移动了较少的时间（因为现在只有一个间隔）。您可以将间隔间隔更改为30/2 = 15，以恢复原始速度：var intervalId = setInterval(moveHeading, 15);

单击鼠标后动画不会停止（JavaScript）

2 个答案: