JavaScript( react ): How to extend async function's await to a given time

Question

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

我当前的代码:

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

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

        setIsLoading(false);
    };

一些示例可以进一步解释我的意思:函数调用 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);
};

也就是说，因为动画还没有完成而让用户停下来可能不是最好的用户体验。当 func 已经完成时，也许您可​​以使动画更快地完成。 (人类往往会注意到延迟 > 大约 80-100 毫秒，年轻时会少一些。)