Javascript jQuery延迟对象上的setInterval

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

您需要执行while循环：

while (condition) {
    code block to be executed
}

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

或do/while循环：

while (condition) {
    code block to be executed
}

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

---

setTimeout用于延迟函数

您要使用的是setInterval

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

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

---

将

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

---

setTimeout

将只运行一次。您需要

setInterval

。除此之外，还有什么不起作用？是的，@KevinBoucher是正确的。这个问题可能是重复的。检查这个答案@KevinBoucher对，我把电话改成了

setInterval

。但是，它仍然只执行一次。完成语法不正确。您正在调用

addToChart

immediately@charlietfl刚刚修复了这个问题，感谢您捕捉到了这一点，但我想知道，如果我尝试将数据处理程序与ajax请求分离，为什么会出现问题，即我将

done

处理程序移出

getData

函数：

getData.done（addToChart）

@badweathercoder我还没有测试过，但是如果你想的话，你可以将它进一步解耦，将

done

处理程序移到外部，因此getData需要返回ajax对象

函数getData（）{return$.ajax（…）；}

，然后在setInterval中，像这样：

setInterval（function（）{getData（）.done（addToChart）；}，1000）

因为当您调用

setInterval（getData，1000）

时，它只会执行getData，不会确认回调是否已完成，您在下一行调用的是该回调，它没有连接到setInterval。这似乎类似于“旧”jQuery方式，您将

success

定义为成功处理程序。我希望尽可能地将回调处理与AJAX请求分离。然后使用一个单独的函数调用

getData

，并将超时放在该函数中，每次都调用新函数。请参阅其他方法