持续的AJAX轮询最终锁定Firefox - Constant AJAX polling eventually locks Firefox

Constant AJAX polling eventually locks Firefox

本文关键字：锁定 Firefox AJAX | 更新日期: 2023-09-27

我有一个PHP web应用程序，它使用jquery/AAJAX来轮询数据库信息。

基本上，我有一个到5000ms的setInterval，它向PHP页面发布$.post，该页面通常接收大量数据（大约3.5kb到10kb）。我发现几个小时后，网络浏览器就停止了。

所有数据都加载到一个div（一个表）中。在每个请求中，我清空（）表并附加新表。我能做些什么来防止它滞后于浏览器？

一些代码，如果它有帮助：

function getData(val ){
    $.post('php/data.php', {
        func: 'getdata', val : val
    }, function (data) {
        if (data) {
            $('#results').empty();
            $.each(data, function (i, e) {
                if (i == "something") {
                    $('#results').append(data.someStuff).......
                }
            });
        }
    }, "json");
}
// On immediate page load
getData(val);
var getData_interval = setInterval(getData.bind(this, val),5000);

由于您还没有发布任何其他代码，我将尽力帮助您解决我所看到的问题。我建议每次$.post方法实际成功时都使用setTimeout，而不是以固定的5秒间隔使用setInterval（这不依赖于其余的调用）。使用固定间隔会产生意想不到的结果，因为你永远无法知道响应的长度（例如，如果连接中断会发生什么？）

function getData(val ){
    $.post('php/data.php', {
        func: 'getdata', val : val
    }, function (data) {
        if (data) {
            $('#results').empty();
            $.each(data, function (i, e) {
                if (i == "something") {
                    $('#results').append(data.someStuff).......
                }
            });
         //this will only perform the next ajax call on success
         setTimeout(function() {getData(val)},5000);
        }
    }, "json");
}
// On immediate page load
getData(val);

希望这能有所帮助！

使用setInterval而不是递归setTimeout时可能会出现许多问题。无论天气如何，SetInterval都将运行，无论回调函数是否成功执行，这意味着随着时间的推移，您可能会挂起浏览器。

尝试更改：

getData(val ){
    $.post('php/data.php', {
        func: 'getdata', val : val
    }, function (data) {
        if (data) {
            $('#results').empty();
            $.each(data, function (i, e) {
                if (i == "something") {
                    $('#results').append(data.someStuff).......
                }
            });
        }
    }, "json");
}

var getData_interval = setInterval(getData.bind(val),5000);

到此：

var myIntervalTime = null;
function getData(val ){
    $.post('php/data.php', {
        func: 'getdata', val : val
    }, function (data) {
        if (data) {
            $('#results').empty();
            $.each(data, function (i, e) {
                if (i == "something") {
                    $('#results').append(data.someStuff).......
                }
            });
        }
        getData_interval();
    }, "json");
}

function getData_interval() {
    myIntervalTimer = setTimeout(function() {
        getData.bind(val);
    }, 5000);
}
function clearGetData_interval() {
   window.clearTimeout(myIntervalTimer);
}
function resetGetData_interval() {
    clearGetData_interval();
    getData_interval();
}

这将确保您的ajax调用只在最后一个调用完成后5秒运行。

此外，请阅读javascript计时器的工作原理：http://ejohn.org/blog/how-javascript-timers-work/