javascript:interrompere setInterval dopo la rimozione dell'elemento

Question

Voglio eseguire clearInterval funzione automaticamente dopo la rimozione div che contiene setInterval funzione e questo div è il risultato di ajax risposta, perché non smettere di sè dopo la rimozione della 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();
});

L'ajax risposta data con javascript setInterval con funzione di intervallo di Id gestore:

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

Ho provato ad usare Jquery scaricare ma lo stesso problema:

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

Ho provato anche ad utilizzare all'interno di ajax risposta:

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

Answer 1

Hai provato a memorizzare l'intervallo sul #element stesso utilizzando $.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

Sono ancora confuso per quello che si sta tentando di fare in generale...così ho assumere:

• Ogni volta che un utente è il tuo #element vuoi recuperare la descrizione di guida dal server e presto l'utente rimuove il focus sull'elemento che si desidera nascondere l'aiuto descrizione

Strega sembra ragionevole ...ma da dove viene il setInterval() vieni in luogo?perché avete bisogno di utilizzare tali metodi?si desidera solo per mostrare il primo su azione?

come un buon sviluppatore, vorrei fare questo:

• chiediamo solo il server per la prima volta per la descrizione di guida, così ho potuto risparmiare un po di carico sul server una volta che si dispone di più utenti su di esso.
• utilizzare il data- proprietà per salvare la descrizione e riutilizzare al momento disponibile
• nota che si potrebbe già in pre-popolato.

---

il mio assunto 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 come jQuery, mi piacerebbe fare qualcosa di simile a questo

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

come semplice esempio, qui è un Demo Live JsBin.

---

Se vuoi per compattare il codice, è possibile utilizzare un Framework CSS per aiutarvi.

Questo è lo stesso esempio, ma ora utilizzando Bootstrap Tooltip.

Answer 3

Dichiarare il ad intervallo al di fuori del blocco e quando l'assegnazione non utilizza Var . Anche una buona idea controllare se il ad intervallo non è ancora utilizzato prima di impostare l'intervallo.

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

.