JavaScript:stoppen Sie setInterval nach dem Entfernen des Elements

Question

Ich möchte ausführen clearInterval funktion automatisch nach dem Entfernen von div, das enthält setInterval funktion und dieses Div ist das Ergebnis einer Ajax-Antwort, da es sich nach dem Entfernen des Div nicht von selbst stoppt.

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

Die Ajax-Antwort data enthält Javascript setInterval funktion mit Intervall-ID-Handler:

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

Ich habe versucht zu benutzen Jquery entladen aber das gleiche Problem:

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

Ich habe auch versucht, es in der Ajax-Antwort zu verwenden:

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

Answer 1

Haben Sie versucht, die Intervall-ID auf dem zu speichern #element selbst verwenden $.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

Ich bin immer noch verwirrt darüber, was Sie im Allgemeinen versuchen...also werde ich annehmen:

• Jedes Mal, wenn ein Benutzer über Ihre #element sie möchten die Hilfebeschreibung vom Server abrufen und sobald der Benutzer den Fokus auf dieses Element entfernt, möchten Sie die Hilfebeschreibung ausblenden

Hexe klingt vernünftig ...aber woher kommt der setInterval() an Ort und Stelle kommen?warum müssen Sie solche Methoden anwenden?du willst es nur bei der ersten Overaktion zeigen?

als guter Entwickler würde ich das tun:

• fragen Sie den Server nur zum ersten Mal nach dieser Hilfebeschreibung, damit ich etwas Last auf dem Server sparen kann, sobald Sie mehrere Benutzer darauf haben.
• verwenden Sie die data- eigenschaften, um die Beschreibung zu speichern und sie bei Verfügbarkeit wiederzuverwenden
• beachten dass Sie sie bereits vorbelegt haben könnten.

---

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

und als jQuery würde ich so etwas machen

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

als einfaches Beispiel hier ein Live-Demo auf JSBin.

---

Wenn du willst um den Code weiter zu verkleinern, können Sie ein verwenden CSS-Rahmen um dir zu helfen.

Dies ist das gleiche Beispiel, aber jetzt mit Bootstrap-Quickinfo.

Answer 3

deklarieren Sie die intervalId außerhalb des Blocks und beim Zuweisen nicht verwenden var.Auch eine gute Idee zu überprüfen, ob die intervalId ist vor dem Einstellen des Intervalls noch nicht verwendet.

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