javascript:dejar de setInterval después de elemento de eliminación de

Question

Quiero ejecutar clearInterval la función de forma automática después de la eliminación de div que contiene setInterval función y este div es el resultado de la respuesta de ajax porque no se detienen a sí mismo después de la eliminación de la 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 respuesta de ajax data es con javascript setInterval con la función de intervalo de Id del controlador:

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

Traté de usar Descargar Jquery pero el mismo problema:

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

He intentado también para uso dentro de la respuesta de ajax:

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

Answer 1

Has probado a guardar el intervalId en el #element en sí el uso de $.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

Todavía estoy confundido por lo que usted está tratando de hacer en general...así que voy a suponer que:

• Cada vez que un usuario a través de su #element va a buscar la ayuda de la descripción del servidor y pronto el usuario quita el foco en que el elemento que desea ocultar de la ayuda descripción

Bruja suena razonable ...pero, ¿de dónde la setInterval() vienen en su lugar?por qué usted necesita para utilizar estos métodos?usted sólo desea que se muestre en el primero a través de la acción?

como un buen desarrollador, yo haría esto:

• sólo pedimos el servidor por primera vez para que ayuden a la descripción, así que me podría ahorrar algo de carga en el servidor una vez que haya varios usuarios en la misma.
• el uso de la data- propiedades para guardar la descripción y re-uso de ellos cuando esté disponible
• nota que ya se han pre-pobladas.

---

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

y como jQuery, me gustaría hacer algo como esto

$(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 un simple ejemplo, aquí es un Demostración en directo de JsBin.

---

Si quieres para reducir el tamaño del código, puede utilizar una Framework CSS para ayudarle a salir.

Este es el mismo ejemplo, pero ahora utilizando Bootstrap Descripción.

Answer 3

declarar la intervalId fuera del bloque, y cuando la asignación no uso var.También es una buena idea para comprobar si el intervalId se utiliza aún antes de establecer el intervalo de tiempo.

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