Soy bastante nuevo en javascript y después de tener una comprensión básica de cómo el bucle de eventos, la cola de devolución de llamada y las API web funcionan juntas para lograr la asincronía en Javascript. Tengo un siguiente código simple que incluye setTimeout y AJAX para probar si mi comprensión del orden de ejecución del código es correcta o no.

 setTimeout(() => { alert('timeout1') }, 0); req = new XMLHttpRequest(); req.open("get", "https://reqres.in/api/products/3"); req.onload = function(data) { alert('request done'+data.target.responseText); }; req.send(); alert('123'); alert('456'); alert('789');

 hello,world

Esperaba que el resultado fuera como:

alerta('123') -> alerta('456') -> alerta('789') -> alerta('tiempo de espera1') -> alerta('solicitud realizada')

Lo que estaba pensando es que primero setTimeout() pertenece a la API del navegador, por lo que aparecerá de la pila de llamadas de javascript y se ejecutará fuera del motor de javascript, luego los scripts seguirán ejecutando la siguiente línea de código. Cuando llegó a la línea req.send() , también se ejecutará fuera del motor de javascript y luego los scripts continuarán.

Y dado que configuré el tiempo de espera en 0 segundos, la función de devolución de llamada setTimeout() ()=>{alert('timeout1')} se insertará en la cola de devolución de llamada primero antes de la función de devolución de llamada req.onload function(){alert('request done');} (después de todo, la solicitud debe tomar algún tiempo para esperar la respuesta, incluso si es súper rápida). Entonces, el orden de ejecución después de que la pila de llamadas esté vacía sería

1. alerta('tiempo de espera1')
2. alerta('solicitud realizada')

Pero el resultado es:

alerta('123') -> alerta('456') -> alerta('789') -> alerta('solicitud realizada') -> alerta('tiempo de espera1')

Aparentemente, mi pensamiento está equivocado. Pero simplemente no puedo resolverlo.

Por favor corrígeme si me equivoqué en esto. ¡Gracias por revisar mi pregunta!