javascript :arrêter setInterval après la suppression de l'élément

Question

je veux exécuter clearInterval fonctionner automatiquement après avoir supprimé div qui contient setInterval fonction et ce div est le résultat d'une réponse ajax car il ne s'arrête pas après avoir supprimé le 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();
});

La réponse ajax data contient du javascript setInterval fonction avec gestionnaire d'ID d'intervalle :

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

J'ai essayé d'utiliser Déchargement Jquery mais même problème :

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

J'ai également essayé de l'utiliser dans la réponse ajax :

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

Answer 1

Avez-vous essayé de stocker l'intervalleId sur le #element lui-même en utilisant $.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

Je suis toujours confus quant à ce que vous essayez de faire en général...donc je supposerai :

• Chaque fois qu'un utilisateur accède à votre #element vous souhaitez récupérer la description de l'aide sur le serveur et bientôt l'utilisateur supprime le focus sur cet élément, vous souhaitez masquer la description de l'aide

La sorcière semble raisonnable...mais d'où vient le setInterval() se mettre en place ?pourquoi avez-vous besoin d’utiliser de telles méthodes ?vous voulez seulement le montrer lors de la première action ?

en tant que bon développeur, je ferais ceci :

• ne demandez au serveur que pour la première fois cette description d'aide, afin de pouvoir économiser de la charge sur le serveur une fois que vous aurez plusieurs utilisateurs dessus.
• Utilisez le data- propriétés pour enregistrer la description et les réutiliser lorsqu'elles sont disponibles
• note que vous pourriez déjà les avoir pré-remplis.

---

mon HTML supposé

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

et comme jQuery je ferais quelque chose comme ça

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

à titre d'exemple simple, voici un Démo en direct sur JsBin.

---

Si tu veux pour réduire davantage le code, vous pouvez utiliser un Cadre CSS pour vous aider.

C'est le même exemple, mais maintenant en utilisant Info-bulle d'amorçage.

Answer 3

déclarer le ID d'intervalle en dehors du bloc, et lors de l'attribution, n'utilisez pas var.C'est aussi une bonne idée de vérifier si le ID d'intervalle est toujours inutilisé avant de définir l’intervalle.

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