Javascript 在动态应用程序上切换页面时可靠地清除间隔

我加载索引中div内的所有内容。其中一些页面需要开始间隔，当切换页面时，这些间隔会一直持续，因此我创建了一个

destroyjs（）

函数，该函数会被需要它的页面覆盖，每次切换页面时也会调用该函数

goServiceXXX函数在网站的导航栏中称为onclick

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);
        }
    });
}

var destroyjs=function（）{}；
功能加载（elem）
{
if（typeof destroy js=='function'）
破坏js（）；
document.getElementById（“mbody”）.innerHTML=''；
}
函数goServiceManager（）
{
var元素=“#mbody”；
var link=“loadservicemanager.php”；
加载（元件）；
$（元素）。加载（链接，函数（）{
重新加载服务器状态（）；
statusInterval=setInterval（函数（）
{
重新加载服务器状态（）；
}, 2000);
destroyjs=函数（）{
clearInterval（状态间隔）；
clearInterval（modalInterval）；
警报（“已销毁的管理器，间隔#”+状态间隔）；
}
});
}
函数goServiceMonitor（）
{
var元素=“#mbody”；
var link=“loadservicemonitor.php”；
加载（元件）；
$（元素）。加载（链接，函数（）{
重新加载服务器状态（）；
statusInterval=setInterval（函数（）
{
重新加载服务器状态（）；
}, 2000);
destroyjs=函数（）{
clearInterval（状态间隔）；
警报（“损坏的监视器，间隔#”+状态间隔）；
}
});
}

这在正常使用时效果很好，但是如果我在两个页面之间单击垃圾邮件，间隔开始增加，2秒的查询现在每2秒调用10次。我添加了要调试的警报，但它们会降低界面速度，使一切正常工作

我的逻辑有漏洞吗？我已经考虑过在单击导航栏按钮时禁用所有导航栏按钮，并在.load结束时启用它们；但是我想知道为什么我当前的实现不起作用，以及它是否可以更容易地修复

---

编辑：：所以我试图处理这个问题，在这个过程中，我意识到当在

.load（）

完成之前调用

destroy js（）

时，问题就会发生。将间隔移到

.load（）

之前可以解决此问题，但如果内容从未加载（或在两秒钟内未加载），则会出现间隔内的函数尝试填充的缺少元素的情况。暂时禁用导航栏并等待。加载完成毕竟是一个简单的解决方法，但我仍然希望对此有更多的意见，或者更好的实现想法。

destroyjs

直到

load（）

完成后才定义。如果在加载上一个选项卡之前切换选项卡，将无法调用正确的

destroyjs

因此，在切换选项卡时，您需要取消任何未完成的加载请求。为此，可以使用jQuery的

ajax

方法。只要存储对结果XHR对象的引用，并在加载新选项卡时调用

abort（）

。中止未完成的ajax请求将阻止其成功回调触发

下面是一个例子（）。请注意，我还更改了清除间隔的方式：

//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];
      }
    });
}

//加载选项卡时使用的ajax请求
var-tabRequest=null；
//切换选项卡时需要清除的任何间隔
var RunningInterval=[]；
功能加载（elem）
{
if（tabRequest）{
//中止未完成的请求，以便不会触发成功回调。
tabRequest.abort（）；
}
运行间隔。forEach（clearInterval）；
document.getElementById（“mbody”）.innerHTML='Loading…'；
}
函数goServiceManager（）
{
var元素=“#mbody”；
var link=“loadservicemanager.php”；
加载（元件）；
tabRequest=$.ajax({
网址：link，
成功：功能（数据）{
$（元素）.html（数据）；
重新加载服务器状态（）；
statusInterval=setInterval（reloadServerStatus，2000）；
modalInterval=setInterval（modalFunction，2000）；
运行间隔=[statusInterval，modalInterval]；
}
});
}
函数goServiceMonitor（）
{
var元素=“#mbody”；
var link=“loadservicemonitor.php”；
加载（元件）；
tabRequest=$.ajax({
网址：link，
成功：功能（数据）{
$（元素）.html（数据）；
重新加载服务器状态（）；
statusInterval=setInterval（reloadServerStatus，2000）；
运行间隔=[statusInterval]；
}
});
}

destroyjs

直到加载（）完成后才定义。如果在加载上一个选项卡之前切换选项卡，将无法调用正确的

destroyjs

。因此，在切换选项卡时，您需要取消任何未完成的加载请求。见。@AlexK谢谢你的回复。与禁用导航栏的想法相比，取消加载（我认为这也会取消加载成功功能，因此创建间隔）是理想的选择。虽然我还不能标记它，但请详细说明一下，并将其作为一个答案发布。