等待请求完成 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

如果执行的任务被包装到一个承诺中，则可以在无限循环中等待它：

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

等待请求完成 setInterval()

Wait for request to finish with setInterval()

javascript

request

setinterval