在下一个 js/react 中设置超时答案

【问题标题】：Settimeout in next js/react在下一个 js/react 中设置超时
【发布时间】：2022-08-23 01:28:04
【问题描述】：

let i = 0

function pollDOM() {     
  console.log(i)

  i++

  setTimeout(pollDOM, 3000) // try again in 300 milliseconds
}

pollDOM()

上述函数使用每 3 秒运行一次，输出如下：

1 

// wait 3 seconds

2 

// wait 3 seconds

3 

// wait 3 seconds

4 

// wait 3 seconds, and so on...

但在 Next.js 中，它会产生如下结果：

1
2 

// wait for 3 seconds

3
4

// wait for 3 seconds

5
6

// wait for 3 seconds, and so on...

为什么它是这样产生的，两个数字在一起？

我怎样才能实现我在普通 JavaScript 中实现的目标？

in Next.js 是什么意思？你能告诉我们你的组件吗？如果没有有关您的代码的更多信息，真的很难为您提供帮助！

标签： javascript reactjs next.js

【解决方案1】：

因为当您的组件第二次渲染时，您将再次添加setTimeout。当组件被装箱时，您必须清除超时并使用useEffect 设置一次。此外，当您必须每 x 秒重复一次时，请使用 setInteval 而不是 setTimeout。尝试：

useEffect(() => {
  let i = 0;

  function pollDOM() {
    console.log(i);
    i++;
  }
  
  const interval = setInterval(pollDOM, 3000);
  
  return () => clearInterval(interval);
}, [])

【讨论】：