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

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

• javascript
• jquery
• setinterval
• clearinterval

Share Improve this question Follow edited May 20, 2012 at 6:31 semsem asked May 20, 2012 at 6:23 semsemsemsem 1,1921212 silver badges2424 bronze badges 9

• 6 it's hard to tell how to clear the interval if we don't see how it's declared. – Joseph Commented May 20, 2012 at 6:25
• 1 is intervalId declared inside the block scope? if it is you will lose it. before clearInterval check if intervalId is not undefined – neu-rah Commented May 20, 2012 at 6:28
• I declared it in the ajax response and it is executed after ajax calling – semsem Commented May 20, 2012 at 6:29
• i'd suggest not to declare such things in ajax response...they only confuse the matter – Parth Thakkar Commented May 20, 2012 at 6:30
• Can I see the AJAX code? You might want to try setting the intervalId in a global scope - ie, window.intervalId = setInterval(blah); then clearInterval(window.intervalId) – Sp4cecat Commented May 20, 2012 at 6:31

 |  Show 4 more ments

3 Answers 3

Sorted by: Reset to default 3

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

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() e 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.

declare the intervalId outside the block, and when assigning don't use var. Also a good idea to check if the intervalId is still unused before set the interval.

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