Javascript 网络服务轮询

Question

我有以下代码，每 5 秒调用一次网络服务。此网络服务检查列表中是否有任何内容。

setTimeout(function () {
  _getListItems();
}, 5000);

但是，我不想每 5 秒检查一次，而是想在页面加载时以及此后每分钟检查一次。如果列表中有内容，则开始每 5 秒调用一次。谁能帮我解决这个问题？

Answer 1

即使答案已经被接受，我也会发布这个，因为 AJAX 和 setInterval 的组合允许我正在处理的应用程序取消负载平衡器并击败所有公司离线网站。

首先，让我们讨论一下 setInterval 和 setTimeout 在 AJAX 轮询方面的区别。

使用setInterval的优点

• 执行功能并根据心跳触发 AJAX 请求的简单方法
• 代码简单易懂
• AJAX 请求每 X 毫秒发送一次，无需考虑请求返回所需的时间

使用setInterval的缺点

• (这是最重要的)下一个请求在发送之前不会等待当前请求完成。当系统开始在服务器端运行缓慢时，这些 AJAX 请求就会堆积起来。比如你每5秒发送一次请求，但是服务器需要10秒才能响应。在一分钟内，单个用户可以在服务器上排队 12 个尚未返回给客户端的请求。现在将其乘以您拥有的并发用户数，这个数字会很快相加。十个用户意味着有 120 个请求在排队。一百个用户 = 1,200 个请求在一分钟内排队。我在一个我们拆除负载均衡器的地方工作。他们不得不拔掉它的插头，因为电源按钮甚至都不起作用。死的。在。这。水...下来。
• 如果用户 session 超时，身份验证错误将更难处理，因为如果服务器返回 401 未授权响应，您必须记住清除间隔

使用setTimeout的优点

• (这是最重要的)在当前请求处理完成之前不会发送新请求。这减轻了我上面解释的灾难。
• 身份验证错误更容易处理，因为当从服务器收到非 200 OK 响应时不会发出新请求

使用setTimeout的缺点

• 您的代码有点复杂，因为您需要在 AJAX 调用成功后重新开始超时
• 请求之间的时间间隔会有所不同，因为间隔实际上是:超时 + AJAX 请求时间 + 响应处理时间，因此一旦您考虑到 5,000 毫秒的超时时间，您就可以得到大约 5,500 毫秒的间隔AJAX 请求返回浏览器以及浏览器处理响应所花费的时间。您可以通过跟踪 AJAX 请求和处理时间并将其从标准超时期限中减去来解决这一问题。

基本上，使用 setTimeout 的结果是增加了代码的复杂性，但降低了当服务器端运行缓慢时您自己的系统遭受 DDOS 攻击的风险。

使用setTimeout的例子

function poll(url, method, period, beforeRequest, onSuccess, onError) {
    var xhr = new XMLHttpRequest(),
        onReadyStateChange= function() {
            if (this.readyState === 4) {
                if (this.status === 200 || this.status === 201) {
                    onSuccess(xhr);
                    setTimeout(sendRequest, period);
                }
                else if (this.status > 399) {
                    // Allow error handling code to retry the operation
                    onError(xhr, sendRequest, period);
                }
            }
        },
        sendRequest = function() {
            var data = beforeRequest(xhr) || null;
            xhr.open(method, url, true);
            xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
            xhr.send(data);
        };

    xhr.onreadystatechange = onReadyStateChange;

    setTimeout(sendRequest, period);
}

并使用函数:

poll("/messages", "POST", 10000,
    function beforeRequest(xhr) {
        return "?user_id=123";
    },
    function onSuccess(xhr) {
        var data = JSON.parse(xhr.responseText);
        // show messages...
    },
    function onError(xhr, sendRequest, period) {
        if (xhr.status === 401) {
            // show dialog to log in user
        }
        else {
            // retry the operation
            setTimeout(sendRequest, period + 10000);
        }
    }
);