时间戳

首页 > 解决方案 > 添加 Click 处理程序，并使用 clearIntervals 取消间隔

jquery - 添加 Click 处理程序，并使用 clearIntervals 取消间隔

问题描述

我添加了fadeOutandfadeIn来查看我的点击处理程序是否可以工作并且确实可以。如何添加单击处理程序以取消动画？如何使用 clearInterval 函数取消间隔？

var offset = 0;
var direction = "left";
var moveHeading = function() {
  if (direction === "left") {
    $('#heading').offset({
      left: offset
    });
    offset += 2;
    if (offset > 400) {
      direction = "down";
      offset = 0;
    }
  } else if (direction === "down") {
    $('#heading').offset({
      top: offset
    });
    offset += 2;
    if (offset > 400) {
      direction = "right";

    }
  } else if (direction === "right") {
    $('#heading').offset({
      left: offset
    });
    offset -= 2;
    if (Math.abs(offset) <= 0) {
      direction = "up";
      offset = 0;
    }
  } else if (direction === "up") {
    $('#heading').offset({
      top: offset
    });
    offset -= 2;
    if (Math.abs(offset) > 200) {
      direction = "left";
      offset = 0;
    }
  }
};

setInterval(moveHeading, 30);

$(document).ready(function() {
  $("#heading").click(function() {
    $(this).fadeOut(3000).fadeIn(3000);
  })
})

clearInterval(moveHeading);
<h1 id="heading">Hola mi gente!! Como esta?</h1>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>

标签： jqueryclicksetintervalclearinterval

解决方案

要在单击时停止动画，#heading您需要存储从setInterval()调用返回的 id，然后将其提供给clearInterval()单击事件处理程序中的调用。试试这个：

var offset = 0;
var direction = "left";
var moveHeading = function() {
  if (direction === "left") {
    $('#heading').offset({
      left: offset
    });
    offset += 2;
    if (offset > 400) {
      direction = "down";
      offset = 0;
    }
  } else if (direction === "down") {
    $('#heading').offset({
      top: offset
    });
    offset += 2;
    if (offset > 400) {
      direction = "right";

    }
  } else if (direction === "right") {
    $('#heading').offset({
      left: offset
    });
    offset -= 2;
    if (Math.abs(offset) <= 0) {
      direction = "up";
      offset = 0;
    }
  } else if (direction === "up") {
    $('#heading').offset({
      top: offset
    });
    offset -= 2;
    if (Math.abs(offset) > 200) {
      direction = "left";
      offset = 0;
    }
  }
};

let interval = setInterval(moveHeading, 30);

$(document).ready(function() {
  $("#heading").click(function() {
    $(this).fadeOut(3000).fadeIn(3000);
    clearInterval(interval);
  })
})
<h1 id="heading">Hola mi gente!! Como esta?</h1>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>

推荐阅读