尝试间隔XMLHttpRequest（）时发生的问题，每5秒使用setTimeout（）进行API调用

Question

我正在为项目进行初始数据提取。它将被缓存，进一步的请求将更少。我试图每5秒间隔一下我的API请求，以避免服务器超载并按照其规则达到速率限制。似乎我的setTimeout()函数实际上并未按预期工作。我记录了时间戳以查看，所有迭代似乎都在同一时间发生。我认为这是由于javascript的异步性质所致，但是我不确定如何解决它。任何帮助将不胜感激。

代码摘录：

var leagues;
function getLeagues(){

    var reqURL = "url";
    var data = new XMLHttpRequest();
    data.open("GET", reqURL);
    data.responseType = "text";
    data.send();

    // parse data on load
    data.onload = function() {
        // League IDs
        leagues = JSON.parse(data.response)

        for (i = 0; i < 5; i++) {
            delay(i); // iterate every 5 secs
        }
    };
}

function delay(i) {
  setTimeout(() => {
    var d = new Date();
    console.log(d.getSeconds())
  }, 5000);
}

Answer 1

您打电话给delay告诉JS在5秒钟内做某事。

然后您立即调用delay告诉JS在5秒钟内再次执行操作。

所以5秒钟后，第一个delay超时触发，然后紧接着第二个触发。

---

如果您想将它们隔开，则需要：

• 在setTimeout调用的函数中第二次调用延迟，因此第二个计时器在第一个计时器完成后无法启动
• 乘以您的时间，第一个是5秒，第二个是10秒，依此类推
• 重构代码以改为使用setInterval

Answer 2

您可以使用Promise代替超时。 setTimeout函数将等待五秒钟，并且所有代码将被执行，因为它不会阻止执行。相反，一个承诺会做到这一点：

async function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
};

您可以在异步循环中使用Promise：

  async function getLeagues(){
        var reqURL = "url";
        var data = new XMLHttpRequest();
        data.open("GET", reqURL);
    data.responseType = "text";
    data.send();

    // parse data on load
    data.onload = function() {
        // League IDs
        leagues = JSON.parse(data.response)
        const delays = [...new Array(5)]; // To have something to loop over

         for await (const d of delays) {
             await delay(5000);
          }
    };
}