useEffect 中 setTimeout 的不同间隔

Question

我试图实现这样一种情况，即 setTimeout 中的函数在 X 秒后执行第一次，然后定期以 Y 间隔执行。

    useEffect(() => {
    let firstTime = true;
    const timer = setTimeout(() => {
      getValue(id).then((res) => {
        setValue(res);
      });
      if (firstTime) {
        firstTime = false;
      }
    }, firstTime ? 30000 : 60000);
    return () => clearTimeout(timer);
  }, [])

然而，这不起作用，因为它在运行函数之前将 firstTime 设置为 false。有没有办法优雅地实现结果？ setTimeout 甚至有可能吗？

Answer 1

您可以使用变量作为 setTimeout 延迟。在这种情况下，您可以将 firstTime 设置为您第一次要使用的延迟 (30000)，然后在内部计时器中使用 if (firstTime == 30000) { firstTime = 60000; }。在这里使用不同的变量名是有意义的。然后将 setTimeout 延迟设置为 firstTime 就像 }, firstTime);

希望这正是您想要的。

useEffect(() => {
    let firstTime = 30000;
    const timer = setTimeout(() => {
      getValue(id).then((res) => {
        setValue(res);
      });
      if (firstTime == 30000) {
        firstTime = 60000;
      }
    }, firstTime);
    return () => clearTimeout(timer);
  }, [])

旧（不正确）答案：

您可以使用带有初始延迟的 setTimeout 来初始化 setInterval，这将以不同的间隔重复后续时间。

useEffect 中 setTimeout 的不同间隔

Different intervals for setTimeout in useEffect

javascript

settimeout

reactjs