javascript - L'exécution non séquentielle des instructions de code JS est normale, mais des problèmes surviennent directement.

Question

1. Je souhaite que la popup se cache automatiquement après 3 secondes. J'ai défini le code suivant :

.

document.getElementById("alertMessageSel").style.display = "block";
document.getElementById("alertMessage").innerHTML = "两次输入手机号不一致！";
var t = Date.now();           
var t1 = Date.now() + 100;
while(t1 - t <= 3000) {
    t1 = Date.now();
};
document.getElementById("alertMessage").innerHTML = "";
document.getElementById("alertMessageSel").style.display = "none";

Il n'y a aucun problème avec le débogage en une seule étape. Il sera exécuté séquentiellement. L'effet est le même que celui que j'imaginais. Cependant, si vous l'exécutez directement sans points d'arrêt, cet effet ne se produira pas. .
Je pensais que js devrait avoir sa propre méthode d'exécution pendant le processus en cours.

2. Je veux connaître le mécanisme de fonctionnement et comment le mettre en œuvre pour obtenir l'effet souhaité.

Answer 1

document.getElementById("alertMessageSel").style.display = "block";
document.getElementById("alertMessage").innerHTML = "两次输入手机号不一致！";
setTimeout(function () {
    document.getElementById("alertMessage").innerHTML = "";
    document.getElementById("alertMessageSel").style.display = "none";
}, 3000);

Answer 2

Ceci provient de l'affiche originale. Lorsque vous cliquez pour afficher le cadre contextuel, ajoutez un intervalle de temps d'attente de trois secondes pour masquer automatiquement le cadre contextuel ou supprimez la structure correspondante du cadre contextuel

Answer 3

Qu'est-ce que le mécanisme de blocage ?
Le mécanisme de blocage Js est lié à la méthode de traitement monothread du moteur Js. Chaque fenêtre a un thread JS. Le soi-disant thread unique signifie que seul un code spécifique peut être exécuté à un moment précis et bloque les autres codes.
Étant donné que le navigateur est piloté par les événements, de nombreux comportements dans le navigateur sont asynchrones (asynchronisés) et il est facile pour les événements d'être déclenchés simultanément ou en continu. Lorsqu'un événement asynchrone se produit, l'événement sera créé et placé dans la file d'attente d'exécution, et le code sera exécuté une fois l'exécution du code actuel terminée. Les événements tels que les événements de clic de souris, les événements de déclenchement de minuterie et les rappels d'achèvement de XMLHttpRequest le seront. tous seront mis en exécution. En attente dans la file d'attente.
Concernant le mécanisme de blocage de Js, vous pouvez regarder le bout de code suivant Généralement, on pensera que ce code va déconnecter 0,1,2

.

pour(var i=0;i<3;i++){

setTimeout(function(){
    console.log(i);
}, 10);

}
En fait, le résultat du journal de ce code est 3,3,3. C'est un problème que les débutants en JS peuvent facilement rencontrer. La raison spécifique est due au mécanisme de blocage de la boucle for. Dans le code ci-dessus, le minuteur setTimeout doit attendre la fin de l'exécution de la boucle for, i est déjà 3 et setTimeout commence à être exécuté à ce moment-là, donc console.log(i) le fera. être 3.
Pour savoir pourquoi i vaut 3, veuillez consulter l'ordre d'exécution de la boucle for. Lorsque i vaut 2, la condition de boucle est remplie et le bloc de code est exécuté. À ce moment, i vaut 3. La condition de boucle est. n'est pas respecté et le bloc de code n'est pas exécuté, le cycle s'arrête.
Pour la boucle for, rappelez-vous que la boucle s'arrête lorsque la condition n'est pas remplie. Pour le code ci-dessus, on voit qu'elle n'est pas satisfaite lorsque i=3.
Comment résoudre le blocage d'événements
En fait, le blocage est une méthode de traitement du moteur js. Il est préférable de ne pas penser à résoudre le "blocage", mais d'insérer le code que nous voulons exécuter dans le "thread principal". C'est difficile à comprendre de cette façon, alors prenons le code ci-dessus comme exemple et passons directement au code

pour(var i=0;i<3;i++){

(function(i){
    setTimeout(function(){
        console.log(i);
    }, 10);
})(i)

Dans le code ci-dessus, nous avons ajouté une fonction anonyme qui est exécutée immédiatement et passé i de la boucle for comme paramètre réel. De cette façon, setTimeout sera exécuté immédiatement sans attendre (l'éditeur ne connaît pas les détails ici, donc je n'entrerai pas dans les détails. Je suppose probablement qu'un nouveau thread temporaire est ouvert, la fonction anonyme est exécutée immédiatement, et puis je suis revenu immédiatement).

Answer 4

Pourquoi ne pas utiliser une minuterie