jQuery 延迟对象上的 setInterval答案

【问题标题】：setInterval on a jQuery deferred objectjQuery 延迟对象上的 setInterval
【发布时间】：2018-05-21 17:46:27
【问题描述】：

我试图更好地理解 jQuery 中延迟对象的使用。

下面的getData 方法异步获取一些数据。完成后，它应该由addToChart 显示到某个预定义的 (log) 部分。这应该定期发生，因此我在getData 的done 处理程序中使用setInterval。

function getData() {
    return $.ajax({
        url: 'https://demo-live-data.highcharts.com/time-data.csv',
        type: 'GET'
    });
}
getData().done(addToChart, function() {
    setInterval(getData, 1000);
});

function addToChart(data) {
    document.getElementById('log').innerText += data;
}

$(document).ready(function() {
    getData();
});

在上面的代码中，getData 似乎只被调用了一次。如何让它定期调用？

另外，有什么方法可以实际调试此代码，而不是运行它并挠头，为什么它的行为不符合预期？（如果您想知道，我是 JavaSCript 的新手）。我使用 Firefox 调试器单步调试了代码，但这没有帮助。

【问题讨论】：

setTimeout 只会运行一次。你想要setInterval。除此之外，还有什么不工作？
是的，@KevinBoucher 是正确的。这个问题可能是重复的。检查这个答案stackoverflow.com/a/729943/4040563
@KevinBoucher 对，我把电话改成了setInterval。但是，它仍然只执行一次。

标签： javascript ajax jquery-deferred

【解决方案1】：

setTimeout 用于延迟函数 https://www.w3schools.com/jsref/met_win_settimeout.asp

你要使用的是setInterval https://www.w3schools.com/jsref/met_win_setinterval.asp

所以看看你想要做什么，我会这样做：

$(document).ready(function() {
    function getData() {
        $.ajax({
            url: 'https://demo-live-data.highcharts.com/time-data.csv',
            type: 'GET'
        }).done(addToChart);
    }

    function addToChart(data) {
        document.getElementById('log').innerText += data;
    }

    setInterval(getData, 1000);
});

【讨论】：

完成的语法不正确。您正在立即调用addToChart
@charlietfl 刚刚解决了这个问题，感谢您发现
这行得通，但我想知道如果我尝试将数据处理程序与 ajax 请求分离，为什么事情会中断，即我将done 处理程序移出getData 函数：getData.done(addToChart);
@badweathercoder 我没有测试过，但如果你愿意，你可以进一步解耦，将done 处理程序移到外面，所以getData 需要返回ajax 对象function getData() {return $.ajax(....);}，然后在setInterval 中这个：setInterval(function() { getData().done(addToChart); }, 1000);
因为当您调用 setInterval(getData, 1000) 时，它只会执行 getData 并且不会确认您在下一行调用的回调完成，并且这未连接到 setInterval

【解决方案2】：

你需要做一个while循环：

while (condition) {
    code block to be executed
}

或 do/while 循环：

do {
    code block to be executed
}
while (condition);

【讨论】：

【解决方案3】：

将done 移动到函数内部，这样每次函数执行并且请求成功时都会调用它

function getData() {
  return $.ajax({
      url: 'https://demo-live-data.highcharts.com/time-data.csv',
      type: 'GET'
    })
    .then(addToChart)
    .always(function() {
      setTimeout(getData, 1000);
    });
}

另一种方法是将您当前正在做的事情包装在一个新功能中

function getData() {
  return $.ajax({
    url: 'https://demo-live-data.highcharts.com/time-data.csv',
    type: 'GET'
  });
}

function loadChart() {
  getData()
    .then(addToChart)
    .always(function() {
      setTimeout(loadChart, 1000);
    });

}

loadChart()

【讨论】：

这似乎类似于“旧”jQuery 方式，您将success 定义为成功处理程序。我想尽可能将回调处理与 AJAX 请求分离。
然后使用一个单独的函数调用getData 并将超时放入该函数并每次调用新函数
查看替代方法