яваскрипт:остановить 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();
});

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

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

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

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

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

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

Answer 1

Пробовали ли вы сохранить интервалId в #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>Stackoverflow</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-фреймворк чтобы помочь вам.

Это тот самый пример, но теперь используя Подсказка по начальной загрузке.

Answer 3

объявить идентификатор интервала вне блока и при назначении не используйте вар.Также неплохо проверить, идентификатор интервала все еще не используется до установки интервала.

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();
});