下一个设置超时 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 而不是递归函数。尝试：

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

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

下一个设置超时 js/react

Settimeout in next js/react

javascript

reactjs

next.js