reactjs - 为什么我的 setTimeout 函数在 10 秒的时间跨度后仅显示一次控制台部分，但之后它会在 1 秒内打印控制台部分

Question

const rootRef = firebase.database().ref().child('distance');
        rootRef.on('value',snap =>{
            console.log("Usage value",snap.val());
            let prevData=this.state.percentage;
            this.consumptionHandler(prevData, snap.val())
            this.watermeterHandler(snap.val());
            setTimeout(()=>{
                console.log('hi');
            },10000)

        })

我正在尝试使用 react 制作一个 web 应用程序。它使用 firebase 作为数据库。我正在开发一个实时 firebase 数据库。我想知道如果我在 .on() 中使用 setTimeout 函数，我认为每 10 秒后会打印一次“hi”，但不太可能仅在 10 秒后第一次出现“hi”，之后出现“hi”只需一秒钟。我的功能，即消费处理程序和水表处理程序工作正常，我只有 setTimeout 功能有问题。

settimeout 函数是否只工作一次？

请提供一个解决方案，使“hi”每隔一秒出现在控制台中。

如果需要更多信息，请告诉我。

看看这个控制台图像是否有帮助

在图像中，使用值是我从我的 firebase 获得的值。作为一个新初学者，我对 Web 开发了解不多，但我认为 .on() 方法是递归运行的，但为什么每个递归 setTimeout 不是正常工作，因为第一个“hi”在 10 秒后出现，但其他“hi”不一样，如图所示。

按照指导，我编写了一个类似的简单代码来实现我想要实现的目标，但在这段代码中，setTimeout 可以正常工作。

const recursiveHandler=(i)=>{
  if(i ===10){
    return
  }
  setTimeout(()=>{
      console.log(i);
      i++;
      recursiveHandler(i)
  }, 10000)

}

recursiveHandler(1);

标签： reactjsfirebase

Answer 1

可能您需要使用 rootRef.once 而不是 rootRef.on，然后使用 setInterval 而不是 setTimeout。我不确定您要达到的目标