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

Question

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

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

我的问题是，当我单击仪表板中的按钮时，有时需要一些时间才能获取详细信息页面。我想那是因为我需要等待 .load('dashboard_content.php')。单击任何详细信息按钮时如何停止页面加载？

Answer 1

使用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();        
}

Answer 2

尝试将 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.
}

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

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

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

jQuery auto refresh - abort the page load when click a button

jquery

onclick

abort

settimeout