How to interrupt a function when jquery tab is getting inactive?

Question

I have a page with several jqueryui tabs. Each tab has a html page as content, which will be refreshed every second with new values of some variables.

The problem is, the values should not be refreshed, when the tab is inactive. (It's a traffic and perfomance problem)

So i tried following:

$(function() {
    $( "#tabs" ).tabs({
        activate: function( event, ui ) {
            //tried some things here
            if (ui.newTab.index() == 1){                    
                setInterval("GetStatus()",1000);                
            }
        }
    });
});

it works halfway. The function "GetStatus" runs every second, when i open the Tab with index 1. But when i switch to another tab, the function still runs in background, and this is not desirable.

So I tried something like

ui.oldTab.empty(), ui.oldTab.unload() ....

But either I used it wrong, or its not that what i need to use.

Thanks for help in forward, Flopo

Answer 1

You can keep a reference to the interval and clear it later:

$(function() {
    var statusInterval;
    $( "#tabs" ).tabs({
        activate: function( event, ui ) {
            //tried some things here
            if (ui.newTab.index() == 1){                    
                statusInterval = setInterval(function() { GetStatus(); }, 1000);                
            } else {
                clearInterval(statusInterval);
            }
        }
    });
});

Note that it's better to pass an anonymous function or function reference to setInterval, rather than a string.