Reliably clear intervals when switching page on a dynamic app

Question

I load all content inside a div in the index. Some of these pages require starting intervals, and when switching page those intervals keep going, so I created a destroyjs() function which gets overridden by pages that need it, and is also called every time you switch pages.

The goServiceXXX functions are called onclick in the website's navbar.

var destroyjs = function(){};
function loading(elem)
{
    if (typeof destroyjs == 'function')
        destroyjs();
    document.getElementById("mbody").innerHTML = '<div class="container4"><img src="dist/img/loading.gif" alt="Loading..."></div>';
}

function goServiceManager()
{
    var element = "#mbody";
    var link = "loadservicemanager.php";
    loading(element);
    $(element).load(link, function(){
        reloadServerStatus();
        statusInterval = setInterval(function() 
        {
            reloadServerStatus();
        }, 2000);
        destroyjs = function(){
            clearInterval(statusInterval);
            clearInterval(modalInterval);
            alert("destroyed manager, interval #"+statusInterval);
        }
    });
}

function goServiceMonitor()
{
    var element = "#mbody";
    var link = "loadservicemonitor.php";
    loading(element);
    $(element).load(link, function(){
        reloadServerStatus();
        statusInterval = setInterval(function() 
        {
            reloadServerStatus();
        }, 2000);
        destroyjs = function(){
            clearInterval(statusInterval);
            alert("destroyed monitor, interval #"+statusInterval);
        }
    });
}

This works fine when used normally however if I spam click between the two pages, intervals start adding up and the 2 second query is now being called 10 times every two seconds. I added the alerts to debug but they slow the interface down enough for everything to work properly.

Is there a hole in my logic somewhere? I already thought of disabling all navbar buttons when one is clicked and enabling them at the end of .load; but I'd like to know why my current implementation is not working and if it can be fixed more easily.

Edit:: So I tried to make a fiddle with the problem and in the process realized that the problem happens when destroyjs() is called before .load() finishes. Moving the interval right before .load() fixes the problem but can create a scenario where if the content never loads (or doesn't load in two seconds) there are missing elements which the function inside the interval tries to fill. Disabling the navbar temporarily and wait for .load to finish is the easy way out after all but I'd still like more opinions on this or maybe ideas for a better implementation.

Answer 1

destroyjs isn't defined until the load() completes. If you switch tabs before the previous tab has loaded, you won't be able to call the correct destroyjs.

Therefore, you will want to cancel any outstanding load requests when switching tabs. To do this, you can use jQuery's ajax method. Just store a reference to the resulting XHR object and call abort() when loading a new tab. Aborting an outstanding ajax request will prevent it's success callback from firing.

Here's an example (DEMO FIDDLE). Notice that I've also changed the way that intervals are cleared:

//ajax request used when loading tabs
var tabRequest = null;

//Any intervals that will need to be cleared when switching tabs
var runningIntervals = [];

function loading(elem)
{
    if (tabRequest) {
      //Aborts the outstanding request so the success callback won't be fired.
      tabRequest.abort();
    }

    runningIntervals.forEach(clearInterval);

    document.getElementById("mbody").innerHTML = '<div>Loading...</div>';
}

function goServiceManager()
{
    var element = "#mbody";
    var link = "loadservicemanager.php";
    loading(element);
    tabRequest = $.ajax({
      url: link,
      success: function(data) {
        $(element).html(data);

        reloadServerStatus();

        statusInterval = setInterval(reloadServerStatus, 2000);
        modalInterval = setInterval(modalFunction, 2000);
        runningIntervals = [statusInterval, modalInterval];
      }
    });
}

function goServiceMonitor()
{
    var element = "#mbody";
    var link = "loadservicemonitor.php";
    loading(element);
    tabRequest = $.ajax({
      url: link,
      success: function(data) {
        $(element).html(data);

        reloadServerStatus();

        statusInterval = setInterval(reloadServerStatus, 2000);
        runningIntervals = [statusInterval];
      }
    });
}