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

it's hard to tell how to clear the interval if we don't see how it's declared. — Joseph, May 20 '12 at 06:25
is intervalId declared inside the block scope? if it is you will lose it. before clearInterval check if intervalId is not undefined — neu-rah, May 20 '12 at 06:28
I declared it in the ajax response and it is executed after ajax calling — semsem, May 20 '12 at 06:29
i'd suggest not to declare such things in ajax response...they only confuse the matter — Parth Thakkar, May 20 '12 at 06: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, May 20 '12 at 06:31
@ParthThakkar i want to use it to show something and after mouse out i want to clear the interval — semsem, May 20 '12 at 06:36

score 3 · Accepted Answer · edited Sep 30 '22 at 14:13

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

balexandre · Answer 2 · 2012-05-20T07:37:22.093

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.

I'm trying to make pictures carousel inside the tooltip and the pictures are different in each tooltip element. So i must set the interval in each ajax request and clear it after removing the tooltip .. This is the ajax response: — semsem, May 20 '12 at 07:41
but why do you keep pooling the server for the tooltip? if you know the images already, why dont you populate the tooltips in, for example, `data-tooltip` and use jQuery just to show that on the images over... — balexandre, May 20 '12 at 07:50
because i have more than 50,000 results and each result have different images extracted from the database so i use setinterval to make picture slider inside each tooltip. — semsem, May 20 '12 at 07:55
I doubt that a user will see all the 50.000 images ... and if you are pooling the images location, it must be easier to get the tooltips as well... there are plenty of sliders that do this for you. checkout [Nivo Slider](http://nivo.dev7studios.com/demos/) for example — balexandre, May 20 '12 at 07:57

score 1 · Answer 3 · answered May 20 '12 at 06:43

1

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

answered May 20 '12 at 06:43

neu-rah

1,662
19
32

unfortunately it didn't work because the intervalId handler is inside the ajax response itself (I mean that the javascript code is executed inside the ajax response then append it to the #main div. – semsem May 20 '12 at 06:49
I tried to setinterval after $('#tooltip').show(); and then append the result to the ajax response using "jquery filter function" but i can't did it. – semsem May 20 '12 at 06:51
well if you use **var** intervalId it still is a local variable that happens to have the same name as the other but the value will still be lost, your response code may not use **var** – neu-rah May 20 '12 at 06:55
Still didn't work because you must make a relation between this intervalId and the remote intervalId inside the ajax response. – semsem May 20 '12 at 07:05
Yes it's defined as object but what's the usefulness to define it and no relation between it and the remote intervalId inside the ajax response? .. When i type clearInterval(intervalId) i mean the remote intervalId not this local intervalId – semsem May 20 '12 at 07:21
remote? i'm not sure what you mean, i thought you were receiving some code on ajax and execute/eval it locally. – neu-rah May 20 '12 at 07:24
No, i execute it inside the ajax response : .. And it is successfully executed. But if you have another way to execute it to be able to clearInterval please explain it. – semsem May 20 '12 at 07:31

javascript: stop setInterval after element removal

3 Answers3