Tengo dos elementos de formulario en mi página HTML: una input y una select .
Vinculado a la input hay un controlador de eventos de blur ; vinculado a la select es un controlador de eventos de change .
Cuando edita el elemento de input y luego hace clic en una opción en el elemento select , se activan ambos eventos. Tal como está, el evento de blur se llama antes del change , que es lo que quiero. No sé si es una feliz coincidencia o si esa es la forma en que está escrita la especificación. Así es como está programado en mi código:
select.addEventListener("change", selFxn); input.addEventListener("blur", blurFxn); var a, b; async blurFxn(e) { a = await fxn1(e); b = await fxn2(a) input.value = b; } async selFxn(e) { b = await fxn3(a); input.value = b } Sin embargo, ¿hay alguna forma inherente en los controladores de eventos para obligar a la función adjunta al evento de change a esperar a que finalice la función adjunta al evento de blur antes de llamarla? EDITAR Ambas funciones modifican la misma variable global, pero no puedo modificar esa variable con otra función en medio de una llamada de función.
Mi solución actual es crear una promesa global creada por el blur y utilizada por el change para esperar a que finalice la función de blur . Pero preferiría no tener que agregar esta complejidad (menor) si no es necesario.
¿Hay alguna forma inherente en los controladores de eventos para obligar a la función adjunta al evento de cambio a esperar a que finalice la función adjunta al evento de desenfoque antes de llamarla?
No. No hay forma de que usted controle el orden en que se activan estos dos eventos. Disparan en el orden en que el sistema decide dispararlos. Y, ciertamente, hay circunstancias en las que se activa un evento de change sin un evento de blur asociado, ya que el evento de blur ocurre cuando el elemento pierde el foco y los eventos de change son posibles sin perder el foco (y, por lo tanto, sin evento de blur ).
Del mismo modo, también puede obtener un evento de blur sin un evento de change asociado.
Si desea que el procesamiento de uno preceda al otro, entonces deberá implementar algún tipo de sistema en el que espere un breve período de tiempo (con un temporizador) para ver si los dos eventos están emparejados (si un segundo evento asociado viene inmediatamente) y, si es así, procéselos en el orden que desee y, si solo llegó un evento dentro de ese temporizador, procese el único evento que obtuvo.
Si los dos eventos están asociados con la misma acción del usuario final, es probable que se presenten secuencialmente con muy poco tiempo entre ellos, por lo que incluso un temporizador corto de 50 ms probablemente sea suficiente para ver si el segundo evento se produce o no y ese tiempo corto. Es poco probable que el usuario se dé cuenta de la demora.
Si entendiéramos mejor lo que está tratando de hacer al procesar los dos eventos, podríamos aconsejarle mejor sobre el código específico para manejar esta situación.
También vale la pena señalar que si sus controladores de eventos realmente están haciendo cosas asincrónicas (que parece que probablemente lo hacen ya que los hizo async ), entonces tampoco hay forma de hacer que el segundo controlador de eventos "espere" hasta que la función async del el primer controlador de eventos está completamente hecho. Una vez que regrese del controlador de eventos anterior, incluso si alguna operación asincrónica aún no se ha completado, el segundo controlador de eventos puede activarse.