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()