Estoy haciendo una aplicación de reacción simple, solo carga un componente cuando alcanza el 100%, luego carga el segundo y después del 100% carga el tercero.
así es como funciona, tengo un botón de inicio, cuando haces clic en él, inicia la primera función que carga el primer componente:
<Button variant="outlined" type="submit" onClick={() => { setLoading(true); start(); }} > Start </Button>y aquí están los componentes de carga, todos son iguales, se espera que el estado sea diferente:
const load1 = () => { const timer = setInterval(() => { setProgress1((prevProgress) => prevProgress >= 100 ? 100 : prevProgress + 10 ); }, 800); return () => { clearInterval(timer); }; }; const load2 = () => { const timer = setInterval(() => { setProgress2((prevProgress) => prevProgress >= 100 ? 100 : prevProgress + 10 ); }, 800); return () => { clearInterval(timer); }; }; const load3 = () => { const timer = setInterval(() => { setProgress3((prevProgress) => prevProgress >= 100 ? 100 : prevProgress + 10 ); }, 800); return () => { clearInterval(timer); }; };y mi comienzo se ve así:
const analyseDNA = () => { setTimeout(load1, 2000); setTimeout(setLoading2(true), 2000); setTimeout(load2, 4000); setTimeout(setLoading3(true), 4000); setTimeout(load3, 6000); };lo que se supone que debe suceder es cargar el componente 1 y luego el componente 2 y luego el componente 3 uno después del otro. luego puede presionar iniciar nuevamente y hace lo mismo.
sin embargo, con este código, el componente 1 y el componente 2 se cargan juntos, y luego, después de 6 segundos, el componente 3, cuando presiona iniciar nuevamente, solo carga el componente 1, y el componente 3 ya está cargado y no pasa nada con el componente 2. cuando abro consola puedo ver que está imprimiendo 1, 2, 3, y parece que el intervalo nunca termina y continúa, ¿cómo puedo solucionar esto?
Te he hecho un sandbox de código . Podría ser más bonito, pero debería llevarte por el camino correcto. El truco sería pasar una función de devolución de llamada a la función de carga. Cuando el cargador llegue a 100 del intervalo, invoque esa devolución de llamada que llama al siguiente cargador.
Personalmente, creo que las promesas son más adecuadas. Haría algo similar a crear un intervalo establecido dentro de una promesa, luego resolvería la promesa cuando el valor llegue a 100. De esta manera, podría hacer que su analyseDNA funcione más como esto:
const analyseDNA = async () => { await load1() await load2() await load3() };Aquí hay una caja de arena para un enfoque de "promesa". Por supuesto, es posible que deba adaptarse si desea mostrar progreso.