javascript - 使用 jQuery 的定期 ajax 请求超时

Question

我使用以下代码每 3 秒发送一次 ajax 请求:

var refreshId = setInterval(function() {
    $.ajax({
        async: true,
        url: 'gohere',
        dataType: 'text',
        cache: false,
        timeout: 5000,

        success: function(result, textStatus, XMLHttpRequest) {
            alert('textStatus: ' + textStatus + ",\nXHR.readyState: " + XMLHttpRequest.readyState + ",\nXHT.status: " + XMLHttpRequest.status);
        },

        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert('textStatus: ' + textStatus + ",\nXHR.readyState: " + XMLHttpRequest.readyState + ",\nXHT.status: " + XMLHttpRequest.status);
        }
    });
}, 3000);

问题是，即使家庭服务器不可访问(例如，未连接到 LAN)，成功函数也会被调用，而不是带有“超时”状态的错误函数(在 Ubuntu 10.04 上测试)使用 FireFox 3.6.7)。
(如果没有定期请求，它会正常工作:在超时时，使用正确的“超时”-statusText 调用错误函数。)

success-alert-function 将在超时时显示以下文本:

    textStatus: success,
    XHR.readyState: 4,
    XHR.status: 0

所以我需要使用 XHR.status 值(成功时应为 200)来确定错误。 这是正常行为还是我做错了什么？

Answer 1

考虑在成功和错误处理程序中移动 setTimeout，并使其异步递归。

var refreshId = function() {
    $.ajax({
        async: true,
        url: 'gohere',
        dataType: 'text',
        cache: false,
        timeout: 5000,

        success: function(result, textStatus, XMLHttpRequest) {
            alert('textStatus: ' + textStatus + ",\nXHR.readyState: " + XMLHttpRequest.readyState + ",\nXHT.status: " + XMLHttpRequest.status);
            setTimeout(refreshId, 3000);
        },

        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert('textStatus: ' + textStatus + ",\nXHR.readyState: " + XMLHttpRequest.readyState + ",\nXHT.status: " + XMLHttpRequest.status);
            setTimeout(refreshId, 3000);
        }
    });
};

问题是，setTimeout 和 setInterval 时间不可靠，尤其是有警报时。只要警报对话框保持打开状态，警报调用就会停止 javascript。此外，setTimeout 和 setInterval 不会中断当前正在运行的代码以保证完美的计时，它们会等到 javascript 线程打开并在代码执行之间跳转。

使用您之前的代码设置，由于 http 往返花费的时间不确定，您还有机会在 refreshId 调用 2 之后到达 refreshId 调用 1 的响应。

通过使您的 setTimeout 取决于传入的响应，您可以获得更稳定和透明的结果。