Question

我在索引中的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);
        }
    });
}

正常使用时效果很好但是如果我在两个页面之间点击垃圾邮件，则间隔开始加起来，而现在每两秒钟调用2秒查询10次。我将警报添加到调试中，但它们会使界面变慢，以使一切正常工作。

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

编辑::所以我试图弄清楚问题并在此过程中意识到在destroyjs()完成之前调用.load()时问题就会发生。在.load()之前移动间隔可以解决问题，但是可以创建一个场景，如果内容从未加载（或者在两秒钟内没有加载），则缺少元素内部函数尝试填充的元素。暂时禁用导航栏并等待.load完成是一个简单的出路，但我仍然希望有更多的意见或者想要更好的实现。

Answer 1

在destroyjs完成之前，

load()尚未定义。如果您在加载上一个标签之前切换标签，则无法调用正确的destroyjs。

因此，您需要在切换选项卡时取消任何未完成的加载请求。为此，您可以使用jQuery的ajax方法。只需存储对生成的XHR对象的引用，并在加载新选项卡时调用abort()。中止一个出色的ajax请求将阻止它成功回调。

这是一个例子（DEMO FIDDLE）。请注意，我还改变了清除间隔的方式：

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

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

1 个答案: