jQuery 延迟对象上的 setInterval

Question

我试图更好地理解 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 调试器逐步检查了代码，但这没有帮助。

Answer 1

你需要做一个 while 循环：

while (condition) {
    code block to be executed
}

或 do/while 循环：

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

Answer 2

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);
});

Answer 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 延迟对象上的 setInterval

setInterval on a jQuery deferred object

javascript

ajax

jquery-deferred