JavaScript（反应）：如何将异步函数的等待扩展到给定时间

Question

我想要一个异步 function 向服务器发送请求并等待响应。 然后它将等待长达 1000 毫秒，以确保 animation 已经播放完毕。 我想知道我是否可以以某种方式组合这两个任务，这样它们加起来总共动态等待了 1000 毫秒。

我当前的代码：

const loadingHandler = async (func, target) => {
        setIsLoading(true);

        await new Promise(r => setTimeout(r, 1000));
        await func(target);

        setIsLoading(false);
    };

一些示例可以进一步解释我的意思： function 调用func()并在（假设）200 毫秒后得到响应。 现在超时应该只是 800 毫秒。 如果func()在 20 毫秒后返回，则超时应该是 980 毫秒。 如果func()花费的时间超过 1000 毫秒，它应该在收到响应后立即继续，而不是额外等待。 那么像这样的“担架等待功能”可能吗？

Answer 1

当然，只要记住到目前为止已经过了多长时间，然后再延迟更长的时间：

const loadingHandler = async (func, target) => {
    setIsLoading(true);

    const started = Date.now();
    await func(target);
    const elapsed = Date.now() - started;
    const delayFurther = 1000 - elapsed;
    if (delayFurther > 0) {
        await new Promise(r => setTimeout(r, delayFurther));
    }

    setIsLoading(false);
};

也就是说，因为 animation 尚未完成而阻止用户可能不是最好的 UX。 当func已经完成时，也许你可以让 animation 更快地完成。 （人类往往会注意到延迟 > 大约 80-100 毫秒，在我们年轻的时候会少一些。）

Answer 2

克劳德先生完美有效解决方案的替代方案：与其等待 promise 完成然后检查我们是否需要启动一个新的，不如同时启动两个 Promise 并等待它们。 具有相同的效果，但使代码更短：

const loadingHandler = async (func, target) => {
  setIsLoading(true);
  await Promise.all([
    func(target),
    new Promise(r => setTimeout(r, 1000)),
  ]);
  setIsLoading(false);
}

Answer 3

在您的代码中，您首先启动 promise（间隔），等待它完成，然后启动第二个（func）并等待完成。 您应该开始两个承诺并一起等待。

const loadingHandler = async (func, target) => {
        setIsLoading(true);

        const p1 = new Promise(r => setTimeout(r, 1000));
        const p2 = func(target);
    
        await Promise.all([p1,p2]);

        setIsLoading(false);
    };