Question

我有一个仪表板，其中div包含仪表板内容。这每10秒从本地数据库刷新一次。（还有另一个时钟功能）。这是我的代码：

setTimeout('sensorcells_load()', 10000);
function sensorcells_load()
{
    jQuery('#sensorcells').load('dashboard_content.php');
    setTimeout('sensorcells_load()', 10000);
    clock();        
}

我的问题是，当我点击仪表板中的按钮时，有时需要时间来获取详细信息页面。我想这是因为我需要等待.load（＆＃39; dashboard_content.php＆＃39;）。单击任何详细信息按钮后，如何停止加载页面？

Answer 1

尝试将window.onbeforeunload与全局.ajax()函数和.abort()一起使用。

var loadTimeout = setTimeout('sensorcellsLoad()', 3000);
function sensorcellsLoad(){
    window.ajaxRequest = jQuery.ajax({
        url: 'dashboard_content.php',
        success: function(data) {
         jQuery('#sensorcells').html(data);
         loadTimeout = setTimeout('sensorcellsLoad()', 3000); 
        }
    });
    clock();
}


window.onbeforeunload = function () {
    clearTimeout(loadTimeout); 
    window.ajaxRequest.abort();
};

无论你如何卸载它，这都会在卸载当前页面之前停止超时。

此外，添加如下所示的全局变量可能是一种很好的做法：

var pageIsBeingRefreshed = false;

window.onbeforeunload = function () {
    pageIsBeingRefreshed = true;
};

这样可以过滤由于实际错误或整个页面重新加载而导致出现ajax错误。

if (pageIsBeingRefreshed) {
    return;
} else {
    //Do some actual error handling.
}

更新：我修改了原始代码，以便使用全局窗口对象进行ajax处理。

JSFiddle可以在这里找到：http://jsfiddle.net/cnoL26ve/1/

Answer 2

使用clearTimeout()之类的，

var t=setTimeout('sensorcells_load()', 10000);
function sensorcells_load()
{
    jQuery('#sensorcells').load('dashboard_content.php');
    t = setTimeout('sensorcells_load()', 10000);
    clock();        
}
// let your button id is stopLoading
$('#stopLoading').on('click',function(){
   clearTimeout(t);
});

更新：如果您想要执行数据库操作后的时间，请使用load()回调，例如，

setTimeout('sensorcells_load()', 10000);
function sensorcells_load()
{
    jQuery('#sensorcells').load('dashboard_content.php',function(){
        setTimeout('sensorcells_load()', 10000); // wait for response then again load after 10 seconds
    });        
    clock();        
}

jQuery自动刷新 - 单击按钮时中止页面加载

2 个答案: