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

Question

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 中实现的目标？

Answer 1

因为当您的组件第二次呈现时，您将setTimeout再次添加。您必须清除超时并useEffect仅在组件装箱时设置一次。另外，当你必须每 x 秒重复一次某件事时，请使用setInteval而不是。setTimeout尝试：

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

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