如何使用设置间隔的promise

Question

我试图在这里解决一个简单的问题，但我不知道该采取什么方向。

getAuthNumber() // returns a promise with a number (eg 98765)
// response times can be 5s-20s

<div class=“auth”> </div>


//code 
let counter = 0;
let el = document.getElementsbyClassName(“auth”)[0];

let func = setInterval(function(){
   counter++;
   getAuthNumber().then((num)=>{
         return [num, counter];

    }).then(res){
          If(counter == res[1])
                el.innerHTML = res[0];
}, 10000);

我需要编写一个函数，每 10 秒获取一次身份验证编号并将其显示在下面的块中。我尝试过使用设置间隔，但 getAuthNumber() 可能需要 10 秒以上才能返回，在这种情况下，我需要丢弃该响应并仅显示当前值。

Answer 1

我已将 Jake Archibald 的 this gist（请参阅 JavaScript 对抗困难方法 - HTTP 203）改编为以下代码：

function promiseInterval(milliseconds, signal, promiseFactory, callback) {
  const start = performance.now();

  function tick(time) {
    if (signal.aborted){
       return;
    }

    promiseFactory().then(
        value => {
            callback(value);
            scheduleTick(time);
        }
    );
  }

  function scheduleTick(time) {
    const elapsed = time - start;
    const roundedElapsed = Math.round(elapsed / milliseconds) * milliseconds;
    const targetNext = start + roundedElapsed + milliseconds;
    const delay = targetNext - performance.now();
    setTimeout(tick, delay);
  }

  scheduleTick(start);
}

从要点开始，我删除了

requestAnimationFrame

和

document.timeline.currentTime

的使用（仅使用

performance.now

），并且添加了

promiseFactory

参数，加上一些重命名（

animationInterval

重命名为

promiseInterval

，

ms

重命名为

milliseconds

和

scheduleFrame

重命名为

scheduleTick

）并格式化。

你可以像这样使用它：

const controller = new AbortController(); // This is used to stop

promiseInterval(
    10000,                       // 10s
    controller.signal,           // signal, to stop the process call `controller.abort`
    getAuthNumber,               // the promise factory
    num => {el.innerHTML = num;} // this is what you do with the values
);

---

它不会真正每 10 秒调用一次

getAuthNumber

。相反，它将等到

getAuthNumber

完成并安排在下一个 10 秒间隔调用，然后重复。所以它不会多次调用它并丢弃值。

Answer 2

不要使用setInterval而是使用setTimeOut函数。 setInterval 的执行取决于 CPU 使用率，如果增加的话 setInterval 将无法在指定的时间间隔内完成

Answer 3

您可以做的是在

async

内运行

setInterval

函数。在下面的代码片段中，

getAuth

函数在2秒后完成，但

setInterval

每1秒运行一次。但它仍然有效，因为

async

内部有一个

setInterval

功能。

const getAuth = () => {
  return new Promise((res, rej) => {
    setTimeout(() => res(Math.random()), 2000);
  });
};

const setDiv = async () => {
  const res = await getAuth();
  console.log(res);
};

setInterval(setDiv, 1000);