¿Por qué necesitas asíncrono? ¿Por qué? Veamos un código.
Pregunta 1:
para (var i = 0; i <100000; i ++) {} alerta ('¡Hola mundo!');Este código significa ejecutar 100 veces antes de ejecutar alerta. El problema que trae esto es que bloquea seriamente la ejecución del código posterior. En cuanto a por qué, se debe principalmente a que JS es un solo hilo.
Pregunta 2:
Por lo general, necesitamos resolver este problema. Si necesitamos agregar el código de script al cabezal, generalmente escribiremos el código en window.onload (si el DOM está operado). ¿Alguna vez has pensado en por qué necesitamos agregar window.onload . La razón es que cuando está operando el DOM, el navegador de código HTML detrás del guión no ha comenzado a cargarse, pero piensas en casarte con ella antes de que ella naciera. ¿Es esto posible? Por supuesto que es imposible, agregue la ventana. La razón por la cual onload puede deberse a que el código en window.onload se ejecuta después de que el documento se carga completamente, lo que es equivalente a asíncrono.
Pregunta 3:
A veces, la página no necesita cargar todo el código a la vez, pero con mayor frecuencia solo cargamos un cierto código de acuerdo con un cierto requisito.
¿Qué es un solo hilo?
Puede entender de esta manera que un solo hilo es la ejecución de segmentos de código, primero ejecutar el anterior y luego ejecutar el siguiente después de completar el anterior.
Entonces, ¿qué JS es asíncrono?
Creo que esto casi se usa mal. Es SetTimeOut/SetInterval y, por supuesto, AJAX. Creo que todos conocen a Ajax asíncrono. Por supuesto, también puede ser sincrónico, pero nadie lo hace así. Sin embargo, algunos amigos pueden no saber de manera diferente sobre SetTimeOut y SetInterval como asíncrono. Hablemos de por qué SetTimeout es asíncrono.
setTimeOut (function () {console.log (0);}, 0) console.log (1); // 1 // 0 Después de ejecutar este código, la primera imprime 1 en lugar de 0. ¿Algunos amigos comienzan a confundirse? Aunque establecemos el setTimeout para ejecutar console.log(0) después de 0 segundos, el setTimeout es muy especial porque es asíncrono. Dejemos de lado por qué la impresión es 1 y luego 0. Hablemos de lo que es asíncrono.
¿Qué es asíncrono?
Por ejemplo, en algunos restaurantes, debe hacer reservas por adelantado, y solo puede ir cuando otros terminan de comer. Por lo tanto, cuando otros están comiendo, puedes hacer otras cosas. Cuando otros terminen de comer, alguien te notificará, para que puedas ir. Para el código, como AJAX, define un método de devolución de llamada. Este método de devolución de llamada no se ejecutará en el momento, pero esperará que la respuesta del servidor se complete antes de ejecutar este código.
Volvamos a la sección anterior de SetTimout. Funciona así. Desde el momento en que defina SetTimeOut (independientemente de si el tiempo es 0 o no), JS no ejecutará directamente este código, pero lo arrojará a una cola de eventos. Solo después de que se realicen todas las tareas de sincronización en la página, se ejecutará el código en la cola de eventos. ¿Qué es la sincronización? Además del código asíncrono, es sincronización -_-.
¿Cómo implementar JS asíncrono?
1. Use setTimout para lograr asíncrono
setTimeOut (function () {console.log (document.getElementBytagName ('Body') [0]);}, 0)Pero hay un pequeño problema con SetTimeout, que es que el tiempo es inexacto. Si desea ejecutar este código más rápido, podemos usar una función proporcionada por HTML5.
requestAnimationFrame (function () {console.log (document.getElementBytagName ('Body') [0]);})La diferencia entre requestAnimationFrame y setTimeout es que SoldingAnimationFrame se ejecuta más rápido que SetTimeout , por lo que muchas personas usan SquityAnimationFrame para crear animaciones.
2. Dinámicamente crear etiquetas de script
var head = document.getElementBytagName ('head') [0]; var script = document.createElement ('script'); script.src = 'mengzhuzi.js'; head.appendChild ('script');3. Use Difer/Async proporcionado por Script
<script src = "xx.js" aplazar> </script>
Diferir: este código se ejecuta solo después de cargar la página.
<script src = "xx.js" async> </script>
Async: ejecute el código de script asynCrónicamente
Sin embargo, Asynchronous también es una desventaja, como el siguiente código:
Código normal:
Pruebe {tire el nuevo error ('Hello World');} Catch (err) {console.log (err);} // Error: Hello World (...)Código asíncrono:
Pruebe {setTimout (function () {tire nuevo error ('Hello World');}, 0)} Catch (err) {console.log (err);} // referenceError: SetTimout no está definido (...)Se puede encontrar que el código en la captura no se ejecuta, lo que significa que el intento no puede capturar el código en el asíncrono.
Resumir
Lo asincrónico en JS y cómo lograr esto se ha terminado básicamente. Es un cliché sobre JS Asynchronous, pero todavía espero que el contenido de este artículo sea útil para todos.