javascript - 使用 setInterval 和 setimeout 使 3 个组件依次加载

Question

我正在制作一个简单的反应应用程序，它只在达到 100% 时加载一个组件，然后加载第二个组件，在 100% 之后加载第三个组件。

这就是它的工作原理，我有一个开始按钮，当你点击它时，它会启动第一个加载第一个组件的函数：

<Button
            variant="outlined"
            type="submit"
            onClick={() => {
              setLoading(true);
              start();
            }}
          >
            Start
          </Button>

这是加载组件，它们都是相同的，但状态不同：

  const load1 = () => {
    const timer = setInterval(() => {
      setProgress1((prevProgress) =>
        prevProgress >= 100 ? 100 : prevProgress + 10
      );
    }, 800);
    return () => {
      clearInterval(timer);
    };
  };

  const load2 = () => {
    const timer = setInterval(() => {
      setProgress2((prevProgress) =>
        prevProgress >= 100 ? 100 : prevProgress + 10
      );
    }, 800);
    return () => {
      clearInterval(timer);
    };
  };

  const load3 = () => {
    const timer = setInterval(() => {
      setProgress3((prevProgress) =>
        prevProgress >= 100 ? 100 : prevProgress + 10
      );
    }, 800);
    return () => {
      clearInterval(timer);
    };
  };

我的开始看起来像这样：

  const analyseDNA = () => {
    setTimeout(load1, 2000);
    setTimeout(setLoading2(true), 2000);

    setTimeout(load2, 4000);
    setTimeout(setLoading3(true), 4000);

    setTimeout(load3, 6000);
  };

应该发生的是依次加载组件 1、组件 2 和组件 3。然后你可以再次按开始，它也是一样的。

但是，使用此代码，组件 1 和组件 2 一起加载，然后在 6 秒后组件 3，当您再次按开始时，它仅加载组件 1，并且组件 3 已经加载，组件 2 没有任何反应。当我打开控制台我可以看到它正在打印 1、2、3，并且似乎间隔永远不会结束并且它一直在继续，我该如何解决这个问题？

标签： javascriptreactjs

Answer 1

我给你做了一个代码沙箱。可能更漂亮，但它应该让你走上正确的道路。诀窍是将回调函数传递给加载函数。当加载器从间隔达到 100 时，调用调用下一个加载器的回调。

个人觉得promise比较合适。您可以按照在 Promise 中创建一个设定间隔的方式做一些事情，然后在值达到 100 时解决该 Promise。这样您可以使您的analyseDNA函数更像这样：

  const analyseDNA = async () => {
    await load1()
    await load2()
    await load3()
  };

这是一个“承诺”方法的沙箱。当然，如果你想展示进步，你可能需要适应。