Publicando el ejemplo mínimo reproducible:
digamos que tengo una página web simple con área de texto, cada vez que hago clic en el botón se llama a la función handleUPClick
.
Dentro de esa función, le he dado una suspensión de 2 segundos, aunque se respeta el texto establecido después de la suspensión, pero setText("Converting to Upper case...");
antes de que la función de suspensión no se respete.
Lo que estoy recibiendo actualmente:
console.log("Uppercase was clicked " + text); As soon as button is clicked sleep of 2seconds setText(text.toUpperCase() ); the text should be converted
Lo que se esperaba:
console.log("Uppercase was clicked " + text); As soon as button is clicked setText("Converting to Upper case..."); This should appear on screen sleep of 2seconds setText(text.toUpperCase() ); the text should be converted
Fragmento de código :
import React, {useState} from 'react' export default function TextForm(props) { const handleUPClick = ()=>{ console.log("Uppercase was clicked " + text); setText("Converting to Upper case..."); function sleep(milliseconds) { const date = Date.now(); let currentDate = null; do { currentDate = Date.now(); } while (currentDate - date < milliseconds); } sleep(2000); setText(text.toUpperCase() ); } const handleOnChange = (event)=>{ console.log("Changed"); setText(event.target.value); } const [text, setText] = useState('Enter text here'); //text is a state variable whose initial value is given and setText will be used to set text for the text variable return ( <div> <h3>{props.heading}</h3> <div className="mb-3"> <textarea className="form-control" value={text} onChange={handleOnChange} id="myBox" rows="8"></textarea> </div> <button className="btn btn-primary" onClick={handleUPClick}>Convert to Uppercase</button> </div> ) }
EDITAR: podría haber 100 formas de lograr lo mismo, pero estoy interesado en saber por qué esto no funciona y no se respeta el ajuste de texto antes de dormir. ¿Está esto relacionado con algo interno de cómo funciona el motor JS? Si es así, ¿entonces qué y por qué?
Intente refactorizar la función handleUPClick de esta manera:
const handleUPClick = async () => { console.log("Uppercase was clicked " + text); setText("Converting to Upper case..."); function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } await sleep(2000); setText(text.toUpperCase()); };