javascript: остановить setInterval после удаления элемента

Question

Я хочу выполнить clearInterval функция автоматически после удаления div, который содержит setInterval функция, и этот div является результатом ответа ajax, потому что он не останавливается после удаления div.

$('#element').mouseover(function(){
     $.post('ajax/ajax.php', function(data) {
         $('<div id="tooltip'></div>").appendTo("div#main");
         $('#tooltip').html(data);
         $('#tooltip').show();
     });
}).mouseout(function(){
     clearInterval(intervalId);
     $('#tooltip').empty();
     $('#tooltip').remove();
});

Ответ Ajax data содержит JavaScript setInterval функция с обработчиком интервала Id:

var intervalId = window.setInterval(pics_load, 3000);

Я пытался использовать JQuery Unload, но та же проблема:

$('#tooltip').unload(function(){
     clearInterval(intervalId);
}

Я также попытался использовать его внутри ответа ajax:

$(window).unload(function(){
     clearInterval(intervalId);
}

Answer 1

Вы пытались сохранить интервал на #element сам с помощью $.data?

$('#element').mouseover(function() {
     var $this = $(this);
     $.post('ajax/ajax.php', function(data) {
         $('<div id="tooltip'></div>").appendTo("div#main");
         $('#tooltip').html(data);
         $('#tooltip').show();
         // save interval id here
         var intervalId = setInterval('pics_load', 3000);
         $this.data('intervalId', intervalId);
     });
}).mouseout(function(){
     // retrieve intervalId here
     var intervalId = $(this).data('intervalId');
     clearInterval(intervalId);
     $('#tooltip').empty();
     $('#tooltip').remove();
});

Answer 2

Я до сих пор растерялся из-за того, что вы пытаетесь сделать в общем... так что я буду предполагать

• Каждый раз, когда пользователь старше вас #element Вы хотите получить описание справки с сервера, и вскоре пользователь удаляет фокус на этом элементе, вы хотите скрыть описание справки.

Ведьма звучит разумно... но при чем тут setInterval() прийти на место? зачем вам такие методы использовать? Вы только хотите показать это на первом действии?

как хороший разработчик, я бы сделал это:

• Впервые попросите у сервера это описание справки, чтобы я мог сэкономить некоторую нагрузку на сервер, если на нем несколько пользователей.
• использовать data- свойства для сохранения описания и повторного их использования при наличии
• обратите внимание, что вы уже могли их предварительно заполнить.

---

мой предполагаемый HTML

<div class="container">
    <h1>Stackru</h1>
    <ul>
      <li>Element 1</li>
      <li>Element 2</li>
      <li>Element 3</li>
      <li>Element 4</li>
      <li>Element 5</li>
    </ul>
</div>

и как jQuery я бы сделал что-то вроде этого

$(function() {

  $("ul li").hover(
    function() {
      // on mouse over

      if($(this).prop("data-tooltip") === undefined) {
        // use $.post() and retrieve the tooltip description,
        //   then place it on data-tooltip property

        $.post('ajax/ajax.php', function(data) {               
          // save for next time
          $(this).prop("data-tooltip", data);
          // show
          tooltip($(this), $(this).prop("data-tooltip")); 
        });
      }
      else { 
        // show saved description
        tooltip($(this), $(this).prop("data-tooltip"));
      }

    },
    function() {
      // on mouse out          
      tooltip();          
    }
  );  

});

function tooltip(elm, msg) {
  if(msg)
    $("<span class='tooltip' />").stop().html(msg).appendTo(elm).show();
  else 
    $(".tooltip").hide();
}

В качестве простого примера приведем живую демонстрацию на JsBin.

---

Если вы хотите уменьшить код больше, вы можете использовать CSS-фреймворк, чтобы помочь вам.

Это тот же пример, но теперь используется подсказка Bootstrap.

Answer 3

Объявляйте intervalId вне блока, и при назначении не используйте var. Также хорошая идея, чтобы проверить, если intervalId все еще не используется, прежде чем установить интервал.

var intervalId=null;
$('#element').mouseover(f    unction(){
     $.post('ajax/ajax.php', function(data) {
         $('<div id="tooltip'></div>").appendTo("div#main");
         $('#tooltip').html(data);
         $('#tooltip').show();
     //somewhere inside this should be:
     if (!intervalId) ... //then set the interval
 });
}).mouseout(function(){
     clearInterval(intervalId);
     intervalId=null;
     $('#tooltip').empty();
     $('#tooltip').remove();
});