使用setInterval()等待请求完成

Question

考虑下面的代码。这段代码在发出另一个请求将新值加载到文档的一部分之前设置了一个5秒的间隔。

问题是，当一个请求需要很长时间来解决(>5秒)时，请求将堆积起来。我们如何确保只在请求完成后才发出新的请求?

在我试图回答这个问题的互联网搜索中，我没有遇到包括setInterval在内的这种具体情况。我遇到了一些使用async或promises的建议，但我还没有发现如何在这种情况下实施这些建议。请原谅我对这个话题缺乏经验。

window.onload = () => {
setInterval(refresh, 5000);
}
function refresh() {
let myVariable = document.getElementById("myId").value;
// reload part of the page for the new values
$("#partial-id").load("partial.html", {
myparameter: myVariable ,
});
}

Answer 1

在.load()回调函数中再次调用该函数

function refresh() {
let myVariable = $("#myId").val();
$("#partial-id").load("partial.html", {
myparameter: myvariable
}, function() {
setTimeout(refresh, 5000);
});
}

这将在前一个功能完成后5秒重复该功能。

Answer 2

如果执行的任务被包装成promise，则可以在无限循环中等待它:

function refresh() {
let myVariable = document.getElementById("myId").value;
return new Promise(res => {
// reload part of the page for the new values
$("#partial-id").load("partial.html", {
myparameter: myVariable ,
}, res);
});
}
(async function () {
while(true) {
await refresh();
await new Promise(res => setTimeout(res, 5000));
}
})();