javascript:parar de setInterval após a remoção do elemento

Question

Eu quero executar clearInterval função automaticamente após a remoção div que contém setInterval função e essa div é o resultado do ajax resposta porque ele não parar-se após a remoção da 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();
});

O ajax resposta data é com javascript setInterval função com intervalo de Id de processador:

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

Eu tentei usar Jquery descarregar mas o mesmo problema:

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

Eu tentei também usar-lo dentro do ajax resposta:

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

Answer 1

Você já tentou armazenar o intervalId no #element mesmo usando $.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

Eu ainda estou confuso por que você está tentando fazer, em geral,...então eu vou assumir:

• Cada vez que um utilizador ao longo do seu #element você deseja obter a ajuda descrição a partir do servidor e, em breve, o usuário remove o foco no elemento que você deseja ocultar a descrição da ajuda

Bruxa parece razoável ...mas onde a setInterval() venha no lugar?por que você precisa para usar esses métodos?você só quer mostrá-lo em primeiro sobre a ação?

como um bom programador, eu faria isso:

• só pedimos que o servidor pela primeira vez para o ajudar a descrição, para que eu pudesse guardar alguma carga no servidor depois de ter vários usuários no mesmo.
• use o data- propriedades para salvar a descrição e utilizá-las quando disponível
• nota que você já poderia tê-los pré-preenchida.

---

minha assumido 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>

e como o jQuery que eu faria algo assim

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

como um simples exemplo, aqui está uma Demonstração ao vivo de JsBin.

---

Se você quiser para reduzir o código mais, você pode usar um O CSS para ajudá-lo.

Este é o mesmo exemplo, mas agora usando Bootstrap Descrição.

Answer 3

declarar a intervalId fora do bloco, e, quando a atribuição não use var.Também é uma boa ideia verificar se o intervalId ainda não utilizados, antes de definir o intervalo.

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