如何根据异步调用的持续时间设置 JS 变量

Question

我有这个：this.toggleWaiting()this.results = await this.query(term)this.toggleWaiting()首先，加载旋转器被触发。然后查询运行。当查询功能结束时，加载微调器将关闭。但是，如果我只想显示加载微调器，而查询时间可能超过 0.5 秒，该怎么办？有没有一种简单的方法可以做到这一点？

Answer 1

实现此目的的一种方法是将承诺传递给一个函数，该函数将仅在查询花费的时间超过指定时间（使用超时）时this.query(term)处理触发。toggleWaiting

例如，下面的代码接受一个 Promise，waitingFn一个将使用isWaiting状态来调用的函数 ( )，以及timeout可用于指定在显示加载微调器之前要等待的时间。最后，当承诺完成后，我们返回结果：

async function handleWaiting(promise, waitingFn, timeout) {

  let loadingStarted = false;

  let timeoutInstance = null;

  const timeoutPromise = new Promise((res) => {

    timeoutInstance = setTimeout(() => {

      loadingStarted = true;

      waitingFn(true);

    }, timeout);

    return res();

  });

  function onFinished() {

    clearTimeout(timeoutInstance);

    if (loadingStarted) {

      waitingFn(false);

    }

  }

  try {

    const [result] = await Promise.all([promise, timeoutPromise]);

    onFinished();

    return result;

  } catch (ex) {

    onFinished();

    throw ex;

  }

}

handleWaiting您可以像这样调用该函数：

const result = await handleWaiting(this.query(term), (isWaiting) => this.toggleWaiting(), 500);

正如 @FZs 和 @Bergi 所指出的（谢谢你们），下面是由于使用 Promise 构造函数而导致的反模式：

function handleWaiting(promise, waitingFn, timeout) {

  return new Promise((res, rej) => {

     let loadingStarted = false;

   

     const timeoutInstance = setTimeout(() => {

       loadingStarted = true; 

       waitingFn(true);

     }, timeout);

     function onFinished() {

       if (loadingStarted) {

         waitingFn(false);

       }

       clearTimeout(timeoutInstance);

     }

     

     return promise

       .then((result) => {

         onFinished();

         res(result);

       })

       .catch((ex) => {

         onFinished();

         rej(ex);

       });

  });

}

Answer 2

在我的 alpineJs 对象中 - 我有这个实现：

{

   waiting: false,

   async handleWaiting(promise, timeout) {

       return new Promise((res, rej) => {

           let loadingStarted = false;

           const timeoutInstance = setTimeout(() => {

               loadingStarted = true;

               this.waiting = true;

           }, timeout);

           const onFinished = () => {

               if (loadingStarted) {

                   this.waiting = false;

               }

               clearTimeout(timeoutInstance);

           }

           promise

               .then((result) => {

                   onFinished();

                   res(result);

               })

               .catch((ex) => {

                   onFinished();

                   rej(ex);

               });

       });

    },

    async searchForTerm(term) {

       this.results = await this.handleWaiting(this.$wire.query(term), 500);

       // do something with the results...

    },

 }

非常简单。