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似乎仅被调用一次。 如何让它定期调用？

另外，有什么方法可以实际调试该代码，而不是运行它并scratch费脑子，为什么它的行为不符合预期？ （如果您想知道的话，我是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()