Tengo 2 funciones, onTouchStart y onTouchEnd, donde onTouchEnd usa una variable de estado que establece onTouchStart. Me preocupa que la función onTouchEnd pueda leer el valor incorrecto de una variable de estado porque es posible que onTouchStart no haya terminado de configurar el estado. El principal problema es que no quiero que onTouchEnd se active cada vez que finaliza onTouchStart, pero necesito onTouchStart para establecer la variable almacenada en el estado en el valor correcto antes de que se ejecute onTouchEnd.
onTouchStart(){ this.setState({ randomBool: true }); } onTouchEnd(){ console.log("randomBool should be true: " + this.state.randomBool); //then some stuff here }Puede usar una marca seguida de setTimeout :
onTouchEnd(){ if (!this.state.randomBool) setTimeout(this.onTouchEnd, 10); //then some stuff here } Si es necesario, también puede pasar parámetros a la llamada "recursiva": setTimeout(() => this.onTouchEnd(v1, v2), 10);
Para hacer esto de manera determinista, necesita algún estado en el que pueda escribir sincrónicamente, y necesita algo que indique que setState se ha completado.
(Supongo aquí que setState proporciona esta indicación en forma de promesa).
En el fragmento a continuación, mantenga presionado el mouse durante menos de un segundo y luego vuelva a intentarlo durante más de un segundo...
document.getElementById("touchMe").addEventListener('mousedown', onTouchStart); document.getElementById("touchMe").addEventListener('mouseup', onTouchEnd); let state; // assuming we can only read and write this async... // ...with this getter and setter async function setState(object) { return new Promise(resolve => { setTimeout(() => { state = object resolve() }, 1000); }) } async function getState() { return new Promise(resolve => { setTimeout(() => { resolve(state) }, 1000); }) } // BUT, we can write this synchronously let settingState = false; function onTouchStart() { settingState = true; setState({ someBool: true }).then(() => { settingState = false; }) } function onTouchEnd() { if (settingState) { console.log("giving up, because we're busy writing state"); return; } console.log("we can get state now"); getState().then(state => console.log(state)); } <div id="touchMe" style="background-color:yellow;">Touch Me</div>