CODEWITHSUNDEEP
javascriptjquerysetinterval
bitlamas
bitlamas

Reputation: 742

Make sure a specific setInterval function instance is running only once

I'm working on a div (parent) that has two other divs (menu and content) as follow:

<div id="parent">
  <div id="menu"></div>
  <div id="content"></div>
</div>

The content loaded in content div is an html file that has a few javascript functions, such as an auto-refresh that reloads its content every 5 seconds.

$(document).ready(function () {
  setInterval(function () {
    grid.reloadDefaultContent(); //this reloads the content on content div.
  }, 5000);
}

There are some links on the page that load differents content into the content div. So far so good, until I go back to "home," which has the auto-refresh function. The problem is that the auto-refresh never stopped, and now that I clicked to go to home again, the function is running twice (or how many times I change the page and come back to home), putting session upon. I'm loading pages using jQuery $.load().

Any ideas on how I can make that instance of setInterval runs only once?

Edit: after reading my own question I saw that it was a bit unclear. My main problem is that when I go back to home, my first instance of the setInterval is already running, and a second starts, making the auto-refresh that was 5 seconds go faster, and it'll go faster and faster every time I change the page and go back to home. This is not the behavior I want. What I need is to STOP the instance of setInterval when I change the content on the div, and restart it when I go back to home.

Upvotes: 6

Views: 5061

Answers (5)

Ateş G&#246;ral
Ateş G&#246;ral

Reputation: 140080

Without changing the source page that does the setInterval, your only option seems to be to hack the grid.reloadDefaultContent function to make it run only once. It is impossible to provide any recommendations without seeing how grid is defined.

Upvotes: 0

Niklas
Niklas

Reputation: 30002

This should do it:

var interval; // make sure that is defined outside of the loaded div content
$(document).ready(function () {
    if (typeof interval != "number"){
         interval = setInterval(function () {
         grid.reloadDefaultContent();
  }, 2000);
    }
});

It will only initiate one instance of the interval timer.

Upvotes: 6

dertkw
dertkw

Reputation: 7838

User jQuery's .one() function

Description: Attach a handler to an event for the elements. The handler is executed at most once per element.

$("#foo").one("click", function() {
  alert("This will be displayed only once.");
});

Upvotes: 0

Jason McCreary
Jason McCreary

Reputation: 73001

If you want your code to only run once, you should use setTimeout() not setInterval().

Upvotes: 0

Pointy
Pointy

Reputation: 413757

If you only want it to run once, why not just use "setTimeout()" instead?

Try this:

$(document).ready(function () {
  if (!$('body').hasClass('refresh-started')) {
    setInterval(function () {
      grid.reloadDefaultContent(); //this reloads the content on content div.
    }, 5000);
    $('body').addClass('refresh-started');
  }
}

Another alternative would be to always re-start the timer instead:

$(document).ready(function() {
  clearInterval($('body').data('refresh-interval'));
  $('body').data('refresh-interval', setInterval(function() {
    grid.reloadDefaultContent(); //this reloads the content on content div.
  }, 5000));
});

Which one is better depends on your circumstances.

Upvotes: 3

Related Questions