构建嵌套间隔循环

Question

我想构建一个每天触发的间隔循环。在这个循环中应该又是一个间隔循环，每 20 分钟触发一次。所以现在，我很好奇，如果我可以像这样构建它：

updatePeriodically() {
    window.setInterval(() => {
        console.log('Fetch daily sensor update!')
        getInitData()
            .then((results) => {
                this.setState({ dataSensor: results })      
            })
            window.setInterval(() => {
                console.log('Fetch 20 minute sensor update')
                getData()
                    .then((results) => {
                        this.setState({ dataSensor: results })
                })
            }, UPDATE_INTERVAL)

    }, DAILY_INTERVAL)
}

我只是想知道，如果这每天触发一个新的 20 分钟间隔循环并且不停止旧循环，那么几天后我有四个 20 分钟更新循环？或者也许有人知道如何更好地做到这一点？

Answer 1

我猜你可以通过检查间隔是否已经开始（你的内部间隔）或者只使用一个间隔并每隔这么多次重复一次 getInitdata 来改进你的间隔计时器，这样：

updatePeriodically() {
    var remaining = 0;
    window.setInterval(() => {
        if (remaining <= 0) {
            console.log('Fetch daily sensor update!');
            getInitData().then((results) => {
                this.setState({ dataSensor: results });
            });
            remaining = DAILY_INTERVAL;
        } else {
            remaining -= UPDATE_INTERVAL;
            console.log('Fetch 20 minute sensor update');
            getData().then((results) => {
                this.setState({ dataSensor: results });
            });
        }
    }, UPDATE_INTERVAL);
}

这样做的好处是它只使用 1 个循环来进行定期更新，并且不会启动额外的间隔。

不过，我建议不要在组件内创建此更新循环。我假设您要显示的数据由商店管理，您应该有一个中心位置来运行此 "polling" 更新，以便所有组件立即获取新数据，而不是每个组件都实现这样的轮询功能。一个好处是所有依赖于此数据的组件都会同时获得它们的新状态数据。

构建嵌套间隔循环

Build a nested interval loop

setinterval

reactjs