Pourquoi avez-vous besoin d'asynchrones? Pourquoi? Voyons un morceau de code.
Question 1:
pour (var i = 0; i <100000; i ++) {} alert ('Hello World !!!');Ce code signifie exécuter 100 fois avant d'exécuter une alerte. Le problème que cela apporte est qu'il bloque sérieusement l'exécution du code suivant. Quant à savoir pourquoi, c'est principalement parce que JS est unique.
Question 2:
Nous devons généralement résoudre ce problème. Si nous devons ajouter du code de script à la tête, nous écrivons généralement le code dans window.onload (si le DOM est opéré). Avez-vous déjà réfléchi à la raison pour laquelle nous devons ajouter window.onload . La raison en est que lorsque vous utilisez le DOM, le navigateur de code HTML derrière le script n'a pas commencé à se charger, mais vous pensez à l'épouser avant sa naissance. Est-ce possible? Bien sûr, c'est impossible, ajoutez une fenêtre. La raison pour laquelle onload peut être due au code dans window.onload Onload est exécuté après que le document est entièrement chargé, ce qui équivaut à asynchrone.
Question 3:
Parfois, la page n'a pas besoin de charger tout le code à la fois, mais le plus souvent, nous ne chargeons qu'un certain morceau de code en fonction d'une certaine exigence.
Qu'est-ce que le fil unique?
Vous pouvez comprendre de cette façon qu'un seul thread est l'exécution des segments de code, en exécutant d'abord le précédent, puis en exécutant le suivant une fois la précédente terminée.
Alors, quel js est asynchrone?
Je crois que cette chose est presque mal utilisée. Il s'agit de setTimeout / setInterval et bien sûr ajax. Je crois que tout le monde connaît l'Ajax asynchrone. Bien sûr, il peut également être synchrone, mais personne ne le fait comme ça. Cependant, certains amis peuvent ne pas savoir différemment sur Settimeout et SetInterval étant asynchrone. Parlons de la raison pour laquelle Settimeout est asynchrone.
setTimeout (function () {console.log (0);}, 0) console.log (1); // 1 // 0 Après avoir exécuté ce code, le premier imprime 1 au lieu de 0. Des amis commencent-ils à être confus? Bien que nous définissions le setTimeout pour exécuter console.log(0) après 0 seconde, le setTimeout est très spécial car il est asynchrone. Mettons de côté pourquoi l'impression est 1 puis 0. Parlons de ce qui est asynchrone.
Qu'est-ce que l'asynchrone?
Par exemple, dans certains restaurants, vous devez faire des réservations à l'avance, et vous ne pouvez y aller lorsque d'autres finissent de manger. Par conséquent, lorsque les autres mangent, vous pouvez faire d'autres choses. Lorsque d'autres finiront de manger, quelqu'un vous informera, afin que vous puissiez y aller. Pour le code, comme AJAX, vous définissez une méthode de rappel. Cette méthode de rappel ne sera pas exécutée à l'époque, mais attendra que la réponse du serveur soit terminée avant d'exécuter ce code.
Revenons à la section précédente de Settimeout. Cela fonctionne comme ça. À partir du moment où vous définissez Settimeout (que le temps soit ou non), JS n'exécutera pas directement ce code, mais le jettera dans une file d'attente d'événements. Ce n'est qu'après que toutes les tâches de synchronisation de la page soient effectuées, le code dans la file d'attente d'événements sera exécuté. Qu'est-ce que la synchronisation? Outre le code asynchrone, c'est la synchronisation -_-.
Comment implémenter JS asynchrone?
1. Utilisez Settimout pour réaliser
setTimeout (function () {console.log (document.getElementByTagName ('body') [0]);}, 0)Mais il y a un petit problème avec Settimeout, c'est-à-dire que le temps est inexact. Si vous souhaitez exécuter ce code plus rapidement, nous pouvons utiliser une fonction fournie par HTML5.
requestanimationframe (function () {console.log (document.getElementByTagName ('body') [0]);})La différence entre RequestanimationFrame et Settimeout est que DequestanimationFrame est exécutée plus rapidement que Settimeout , de nombreuses personnes utilisent la demandes de demandes pour créer des animations.
2. Créer dynamiquement des balises de script
var head = document.getElementByTagName ('head') [0]; var script = document.createElement ('script'); script.src = 'Mengzhuzi.js'; head.appendChild ('script');3. Utilisez un repère / async fourni par le script
<script src = "xx.js" Defer> </cript>
Défermer: ce code est exécuté uniquement après le chargement de la page.
<script src = "xx.js" async> </ script>
async: exécuter le code de script de manière asynchrone
Cependant, l'asynchrone est également un inconvénient, comme le code suivant:
Code normal:
essayez {lancer une nouvelle erreur ('Hello World');} catch (err) {Console.log (err);} // error: Hello World (…)Code asynchrone:
try {settimout (function () {throw new error ('hello world');}, 0)} catch (err) {console.log (err);} // ReferenceError: Settimout n'est pas défini (…)On peut constater que le code dans la capture n'est pas exécuté, ce qui signifie que l'essai ne peut pas capturer le code dans l'Asynchrone.
Résumer
L'asynchrone en JS et comment y parvenir est essentiellement terminé. C'est un cliché sur JS Asynchronous, mais j'espère toujours que le contenu de cet article sera utile à tout le monde.