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

Posted 2023-02-22

【中文标题】jQuery自动刷新 - 单击按钮时中止页面加载

【英文标题】：jQuery auto refresh - abort the page load when click a button

【发布时间】：2015-08-25 12:30:33

【问题描述】：

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

setTimeout('sensorcells_load()', 10000);
function sensorcells_load()

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

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

【参考方案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/

【讨论】：

谢谢马格努斯。如果我们停止 setTimeout，它会停止已经开始的页面加载吗？因为我的问题是，将数据从数据库加载到仪表板需要时间（需要 3-5 秒）。我需要停止从数据库加载。

clearTimeout 不会停止已经在执行的 ajax 调用。但是使用.abort() 会。我将使用此代码更新我的帖子。

我已将代码修改为使用.ajax() 和.abort() 而不是.load()。

我在var window.ajaxRequest = $.ajax( 行出错了。我删除了window 并尝试了。页面正在首次加载。但这并不是每 10 秒刷新一次 :(

我刚刚又更新了代码，现在试试。在window,ajaxRequest = ... 之前不应该有var。我已经制作了一个 JSFiddle 来显示实际代码（尽管由于要调用的测试页面的限制，结果在那里不是很漂亮:)），而且我还使用了 setInterval 而不是 setTimeout ，因为你在打电话以任何方式一遍又一遍地使用相同的代码。

【参考方案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();        

【讨论】：

我向 Magnus 提出了同样的问题。如果我们停止 setTimeout，它会停止已经开始的页面加载吗？因为我的问题是，将数据从数据库加载到仪表板需要时间（需要 3-5 秒）。我需要停止从数据库加载。