Question

I have a web page with 2 tabs. These tabs show/hide divs when clicked. Both tabs use jquery to make an ajax call to a php script to display results from a different database. So tab 1 shows a list of food and the second tab shows a list of prices. Its set to refresh automatically every 30 seconds. My question is when I click between the 2 tabs I prefer the tab not clicked stops the ajax call so only the one ajax call is running, basically for optimization purposes. How would I go about doing this? Would I use setInterval to have it run the first tab ajax call every 30 seconds then when the other tab is clicked a function is called to run clearInterval on the id the first setinterval was running? Then visa versa if the first tab is clicked it clears the interval for the second tab ajax call?

Answer 1

Basicly there is no reason for what you are doing.

I would prefer, if you have something to load, that needs to be loaded after some time, you should call for both tabs, but only ask, if something changed. So let´s say, you call the server every 10 seconds if something changed, returning false or true is not such a huge thing, and if returned yes, just synchronize both items.

if there is no need to sync both items, why you just dont sync them when the tab is clicked?

For user experience it´s better to ask for changes often, but syncing the content only if needed.

And if you do this all, don´t use setInterval but setTimeout and in you function call the setTimeout again, setInterval is not so good 😉