Comprensión de síncrono y asíncrono en JavaScript - Parte 2
En la primera parte de este post, vimos cómo el Conceptos de síncrono y asíncrono. son percibidos en JavaScript. En esta segunda parte, el señor X aparece nuevamente para ayudarnos a entender. Cómo el setTimeout y AJAX. APIs trabajo.
Una petición extraña
Retrocedamos a la historia del Sr. X y la película para la que te quieres ir. Diga que deja una tarea para el Sr. X antes de la salida y dígale que solo puede comenzar a trabajar en esta tarea. cinco horas después él recibió tu mensaje.
No está contento con eso, recuerda, no recibe un mensaje nuevo hasta que termina con el actual, y si toma el tuyo, tiene que esperar cinco horas incluso para comenzar la tarea. Entonces, para no perder el tiempo, él trae un ayudante, Sr. H.
En lugar de esperar, le pide al Sr. H que dejar un nuevo mensaje para la tarea en la cola Pasadas las horas indicadas, se pasa al siguiente mensaje..
Cinco horas pasadas; Sr. H actualiza la cola con un nuevo mensaje. Después de que haya terminado de procesar todos los mensajes acumulados antes de los del Sr. H, el Sr. X lleva a cabo su tarea solicitada. Así, de esta manera, puedes dejar una petición para ser cumplido en un momento posterior, y no esperes hasta que se cumpla.
Pero, ¿por qué el Sr. H deja un mensaje en la cola en lugar de contactar directamente al Sr. X? Porque como mencioné en la primera parte, el solamente manera de contactar al Sr. X es dejándole un mensaje a través de llamada telefónica - sin excepciones.
1. El setTimeout () método
Supongamos que tiene un conjunto de códigos que desea ejecutar después de un cierto tiempo. Para hacer eso, tu solo envuélvelo en una función, y agregarlo a un setTimeout () método junto con el tiempo de retraso. La sintaxis de setTimeout () es como sigue:
setTimeout (función, tiempo de retardo, arg…)
los arg ... parámetro representa cualquier argumento que toma la función, y tiempo de retardo Se agregará en milisegundos. A continuación puede ver un ejemplo de código simple, que produce “Oye” en la consola despues de 3 segundos.
setTimeout (function () console.log ('hey'), 3000); Una vez setTimeout () comienza a correr, en lugar de bloquear la pila de llamadas hasta que el tiempo de retardo indicado haya terminado, el temporizador se activa, y la pila de llamadas se vacía gradualmente para el siguiente mensaje (de manera similar a la correspondencia entre el Sr. X y el Sr. H).
Cuando el temporizador expira, un nuevo mensaje se une a la cola, y el bucle de eventos lo recoge cuando la pila de llamadas está libre después de procesar todos los mensajes anteriores, por lo que el código se ejecuta de forma asíncrona.
2. AJAX
AJAX (JavaScript asíncrono y XML) es un concepto que utiliza el XMLHttpRequest (XHR) API para hacer peticiones al servidor y manejar las respuestas.
Cuando los navegadores realizan solicitudes de servidor sin utilizar XMLHttpRequest, el página se actualiza y recarga su interfaz de usuario. Cuando el procesamiento de solicitudes y respuestas son manejados por la API XHR, y La interfaz de usuario no se ve afectada.
Así que, básicamente, el objetivo es Hacer peticiones sin recargar la página.. Ahora, ¿dónde está el “asincrónico” ¿en esto? El solo uso del código XHR (que veremos en un momento) no significa que sea AJAX, porque la API XHR puede Trabajar tanto de forma síncrona como asíncrona..
XHR por defecto se establece en trabajar asincronicamente; cuando una función realiza una solicitud utilizando XHR, Vuelve sin esperar la respuesta..
Si XHR está configurado para ser sincrónico, entonces la función espera hasta que el la respuesta es recibida y procesada antes de volver.
Ejemplo de código 1
Este ejemplo presenta una XMLHttpRequest creación de objetos. los abierto() método, valida la URL de solicitud, y la enviar() método envía la solicitud.
var xhr = nuevo XMLHttpRequest (); xhr.open ("GET", url); xhr.send (); Cualquier acceso directo a los datos de respuesta después de enviar() será en vano, porque enviar() no espera hasta que se complete la solicitud. Recuerde, XMLHTTPRequest está configurado para funcionar de forma asíncrona de forma predeterminada.
Ejemplo de código 2
los hola.txt El archivo en este ejemplo es un archivo de texto simple que contiene el texto 'hola'. los respuesta la propiedad de XHR no es válida, ya que no generó el texto 'hola'.
var xhr = nuevo XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send (); document.write (xhr.response); // cuerda vacía XHR implementa una micro-rutina que sigue buscando respuesta en cada milisegundo, y desencadena eventos complementarios para los diferentes estados una solicitud pasa. Cuando se carga la respuesta, un evento de carga es activado por XHR, que puede entregar una respuesta válida.
var xhr = nuevo XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send (); xhr.onload = function () document.write (this.response) // escribe 'hola' al documento La respuesta dentro del evento de carga. salidas 'hola', el texto correcto.
Es preferible ir por el camino asíncrono, ya que no bloquea otros scripts hasta que se completa la solicitud.
Si la respuesta tiene que ser procesada sincrónicamente, pasamos falso como el ultimo argumento de abierto, cual marca la API XHR diciendo eso tiene que ser síncrono (por defecto el último argumento de abierto es cierto, que no necesitas especificar explícitamente).
var xhr = nuevo XMLHttpRequest (); xhr.open ("GET", "hello.txt", falso); xhr.send (); document.write (xhr.response); // escribe 'hola' al documento Porque aprender todo esto?
Casi todos los principiantes cometen algunos errores con conceptos asíncronos como setTimeout () y AJAX, por ejemplo, asumiendo setTimeout () ejecuta el código después del tiempo de demora, o procesando la respuesta directamente dentro de una función que realiza una solicitud AJAX.
Si sabes cómo encaja el rompecabezas, puedes evitar tal confusión. Usted sabe que el tiempo de retraso en setTimeout () no indica la hora cuando comienza la ejecución del código, pero el tiempo cuando el temporizador expira y se pone en cola un nuevo mensaje, que solo se procesará cuando la pila de llamadas sea libre de hacerlo.
