Блог

Главная - Вопросы по программированию - Добавьте обработчик кликов и отмените интервалы с помощью clearIntervals

Добавьте обработчик кликов и отмените интервалы с помощью clearIntervals

#jquery #click #setinterval #clearinterval

#jquery #нажмите #setinterval #clearinterval

Вопрос:

Я добавил fadeOut и fadeIn , чтобы посмотреть, будет ли работать мой обработчик кликов, и он работает. Как я могу добавить обработчик кликов, чтобы отменить анимацию? Как я могу отменить интервалы с помощью функции 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>

Ответ №1:

Чтобы остановить анимацию по щелчку #heading , вам необходимо сохранить идентификатор, возвращенный из setInterval() вызова, а затем предоставить его clearInterval() вызову в обработчике событий click. Попробуйте это:

 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>

Комментарии:

1. Спасибо @Rory McCrossan за вашу помощь, я очень ценю это.