如何避免 jQuery 定期 HTTP 请求的不连续性？

Question

我是 jQuery 新手，想用它每 3 秒从服务器检索一次数据。 Web 服务器每 3 秒以 JSON 格式发送数据。 JSON 数据包含一个数值数组字段 { "samples" : [10,15,-7,19,34,...] }。我编写了以下 jQuery ajax 请求，每 3 秒从服务器检索一次数据：

function getData() {
    $.ajax({
        url : 'http://example.com',
        type: 'GET',
        success : function(data) {
            myData = data.samples;
            setTimeout(getData, 3000);
        },
        dataType : 'json'
    });

    return myData;
}

但是，由于时间抖动，从服务器发送的数据可能不会每 3 秒准确更新一次。那么我应该如何编写 jQuery ajax 请求以避免可能的数据不连续性呢？也就是说，我希望返回的 myData 包含来自每个 getData() 调用的所有新数据数组元素，并且不包含由于可能的时序抖动而导致的重复或丢失的数据样本。

Answer 1

将数据在服务器上更新的最后一个时间戳与另一个 JSON 数组一起发送。然后，当需要使用您的 jQuery 调用再次请求数据时，请检查时间戳与您已有的时间戳。这将为您提供一种方法来了解它是否是相同的数据，或者它是否已被刷新。

Answer 2

我认为您可能需要传递更多信息。在您的 AJAX 中包含另一个名为“lastUpdate”的字段，并带有时间戳。您的 javascript 可以保存它获得的最后一个时间戳并将其提供给服务器。服务器仅响应该时间戳之后的样本（因此您不会错过任何样本），并且如果它仍然是最新的，则不会响应任何内容（因此您不会重复）。

Answer 3

返回myData 没什么意义。 (a) 变量未在函数内声明，(b) 数据从服务器异步到达。

就目前而言，getData() 被保证（最多）返回在上一次迭代中获得的数据。

要使用新获得的数据，您需要在success 函数或done() 回调中对myData 执行任何必要的操作，如下所示：

function getData() {
    $.ajax({
        url: 'http://example.com',
        type: 'GET',
        dataType : 'json'
    }).done(function(data) {
        var myData = data.samples;
        //Do whatever is necessary with myData here.
        //Call extenal function as necessary to do the job.
        setTimeout(getData, 3000);
    });
}

Answer 4

以利用 ajax 的异步特性的方式编写代码。例如，

var interval;
function handleData(data) {
    // I handle the data returned from the ajax request.
    console.log(data);
}
function getData() {
    // I send the ajax request.
    $.ajax({
        url: 'http://example.com',
        success: handleData,
        error: function(){
            // on error, stop making requests to help with debugging.
            console.log(arguments);
            clearInterval(interval);
        }
    });
}
interval = setInterval(getData,3000);

这将导致在大多数情况下，响应将按顺序排列。如果您摆脱了间隔，而是在上一次成功后 3 秒调用 get data，那么您可以在所有情况下都做到这一点。

function getData() {
    // I send the ajax request.
    $.ajax({
        url: 'http://example.com',
        success: handleData,
        error: function(){
            // on error, stop making requests to help with debugging.
            console.log(arguments);
        }
    });
}
function handleData(data) {
    // I handle the data returned from the ajax request.
    console.log(data);
    setTimeout(getData,3000);
}
getData();

旁注：“时序抖动”根本不是抖动，它只是一个逻辑错误。由于 Ajax 是异步的，数据总是落后一组。