javascript: stop setInterval after element removal

Question

I want to execute clearInterval function automatically after removing div which containing setInterval function and this div is the result of ajax response because it don't stop itself after removing the 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();
});

The ajax response data is containing javascript setInterval function with interval Id handler:

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

I tried to use Jquery unload but the same problem:

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

I tried also to use it inside the ajax response:

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

Answer 1

Have you tried storing the intervalId on the #element itself using $.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

I'm still confused for what you are trying to do in general... so I will assume:

• Every time that a user over's your #element you want to fetch the help description from the server and soon the user removes the focus on that element, you want to hide the help description

Witch sounds reasonable ... but where does the setInterval() come in place? why do you need to use such methods? you only want to show it on the first over action?

as a good developer, I would do this:

• only ask the server for the first time for that help description, so I could save some load on the server once you have several users on it.
• use the data- properties to save the description and re-use them when available
• note that you could already have them pre-populated.

---

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

and as jQuery I would do something like this

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

as a simple example, here is a Live Demo on JsBin.

---

If you want to shrink the code more, you can use a CSS framework to help you out.

This is the same example, but now using Bootstrap Tooltip.