javascript - Settimeout in next jsreact - Stack Overflow

admin管理员组

文章数量:1352172

let i = 0

function pollDOM() {     
  console.log(i)

  i++

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

pollDOM()

The above function use to run every 3 second, output is like:

1 

// wait 3 seconds

2 

// wait 3 seconds

3 

// wait 3 seconds

4 

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

But in Next.js, it produces a result as:

1
2 

// wait for 3 seconds

3
4

// wait for 3 seconds

5
6

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

Why it is produced this way, two numbers together?

How can I achieve that that I am achieving in normal JavaScript?

let i = 0

function pollDOM() {     
  console.log(i)

  i++

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

pollDOM()

The above function use to run every 3 second, output is like:

1 

// wait 3 seconds

2 

// wait 3 seconds

3 

// wait 3 seconds

4 

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

But in Next.js, it produces a result as:

1
2 

// wait for 3 seconds

3
4

// wait for 3 seconds

5
6

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

Why it is produced this way, two numbers together?

How can I achieve that that I am achieving in normal JavaScript?

• javascript
• reactjs
• next.js

Share Improve this question Follow edited May 28, 2022 at 10:51 Roman Mahotskyi 6,69588 gold badges5050 silver badges9393 bronze badges asked May 28, 2022 at 10:45 Ravi ShankarRavi Shankar 14511 gold badge44 silver badges1414 bronze badges 1

• 1 what do you mean by in Next.js ? Can you show us your Component ? Without more information about your code, it's really difficult to help you ! – Olivier Boissé Commented May 28, 2022 at 10:53

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Bacause when your ponent is rendered for a second time you're adding the setTimeout again. You have to clear your timeout and use useEffect to set it only once, when the ponent is crated. Also, use setInteval instead of setTimeout when you have to repeat something every x seconds. Try:

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

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

本文标签： javascriptSettimeout in next jsreactStack Overflow