如何使用设置间隔的承诺答案

【问题标题】：How to use promise with set interval如何使用设置间隔的承诺
【发布时间】：2021-06-29 20:57:33
【问题描述】：

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

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 秒获取一次身份验证号，并将其显示在下面的块中。我尝试使用 set interval 但 getAuthNumber() 可能需要超过 10 秒才能返回，在这种情况下，我需要丢弃该响应并仅显示当前值。

【问题讨论】：

标签： javascript angular api real-time setinterval

【解决方案1】：

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

【讨论】：

【解决方案2】：

您可以在setInterval 中运行async 函数。在以下代码 sn-p 中，getAuth 函数在 2 秒后完成，但 setInterval 每 1 秒运行一次。但它仍然有效，因为setInterval 内部有一个async 函数。

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

【讨论】：

谢谢。这行得通。但是如果响应时间是可变的，即我们想显示响应是否在下一个请求发出之前出现，因为之前的数据是陈旧的。前任。第 1 秒 -> promise1 -> 234 - 需要 1 秒 -> 显示第 2 秒 -> promise2 -> 743 - 需要 3 秒才能返回 -> 不显示第 3 秒 -> promise3 -> 643- 需要显示

【解决方案3】：

我已将 Jake Archibald 的 this gist（参见 JavaScript counters the hard way - 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重命名为@987654329 @、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 秒间隔调用，然后重复。所以它不会多次调用它并丢弃值。

【讨论】：