let i = 0 function pollDOM() { console.log(i) i++ setTimeout(pollDOM, 3000) // try again in 300 milliseconds } pollDOM()La función anterior se usa para ejecutarse cada 3 segundos, la salida es como:
1 // wait 3 seconds 2 // wait 3 seconds 3 // wait 3 seconds 4 // wait 3 seconds, and so on...Pero en Next.js, produce un resultado como:
1 2 // wait for 3 seconds 3 4 // wait for 3 seconds 5 6 // wait for 3 seconds, and so on...¿Por qué se produce así, dos números juntos?
¿Cómo puedo lograr lo que estoy logrando en JavaScript normal?
Porque cuando su componente se procesa por segunda vez, está agregando setTimeout nuevamente. Debe borrar su tiempo de espera y usar useEffect para configurarlo solo una vez, cuando el componente está embalado. Además, use setInteval en lugar de funciones recursivas cuando tenga que repetir algo cada x segundos. Probar:
useEffect(() => { let i = 0; function pollDOM() { console.log(i); i++; } const interval = setInterval(pollDOM, 3000); return () => clearInterval(interval); }, [])