如何根据异步调用的持续时间设置 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...    }, }非常简单。