Geek Answers Handbook

Make sure that a specific instance of setInterval only works once.

I am working on a div (parent) that has two more divs (menu and content) as shown below:

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

Content uploaded to the content div is an html file with several javascript functions, such as automatic updating, which reloads its contents every 5 seconds.

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

There are several links on the page that load different contents into the contents of the div. So far so good, until I return to the "house", which has the auto-update function. The problem is that automatic updating never stopped, and now that I clicked to return home, the function runs twice (or how many times I change the page and return home), setting up a session. I am loading pages using jQuery $.load() .

Any ideas on how I can get this setInterval instance to run only once?

Edit: After reading my own question, I saw that this is a bit unclear. My main problem is that when I get home, my first instance of setInterval is already running, and the second is starting, making an automatic update that has passed 5 seconds, and it will go faster and faster every time I change the page and return home . This is not the behavior I want. I need a STOP instance of setInterval when I change the contents in a div, and reload it when I get home.

+4
source share
5 answers

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 initiates only one timer instance.

+5
source

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

Try the following:

 $(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 is to always restart the timer:

 $(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 best depends on your circumstances.

+2
source

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

0
source

JQuery .one() user function

Description Attach a handler to the event for items. A handler is executed no more than once per element.

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

Without modifying the original page that setInterval does, your only option is to hack the grid.reloadDefaultContent function grid.reloadDefaultContent that it grid.reloadDefaultContent only once. It is not possible to provide any recommendations without seeing how the grid defined.

0
source

More articles:


All Articles