Pourquoi la suppression de jQuery n'est-elle pas synchrone ?

Question

Il y a un bouton sur la page comme suit

<button onclick="index.testClick()" >开始</button>

Le script js correspondant à cette page est le suivant

var index = {
    testClick: function () {
        index.createBtn(function() {
            index.sleep(10000);
        });
    },
    sleep: function (n) {
        var start = new Date().getTime();
        while (true) {
            if(new Date().getTime() - start > n) 
                break;
        } 
    },
    createBtn: function (func) {
        var    button = $('<button>测试</button>');
        button.bind("click",function(){
            button.remove();
            func();    
        });    
        $('body').prepend(button);
    },
};

Pourquoi après avoir cliqué sur le bouton démarrer puis cliqué sur le bouton test, le bouton test se met réellement en veille (je l'ai remarqué sur la requête $.ajax synchronisée, simulée ici avec une boucle) avant d'être supprimé ? Ce n'est qu'en enveloppant sleep dans setTimeout que nous pouvons obtenir l'effet souhaité... ?

Answer 1

Cette question est en effet un peu petite... À première vue, je pensais que le code dormait volontairement 10 secondes. Cependant, la personne qui pose la question ne peut pas le comprendre D'après les commentaires dans la zone de commentaire ci-dessus, je sais probablement quoi. la question est...

Ce truc est lié au thread de l'interface utilisateur du navigateur. Le navigateur est monothread (ce fil est généralement appelé le thread de l'interface utilisateur du navigateur).

Chapitre 6 de l'interface utilisateur réactive rapide « JavaScript hautes performances », il y a deux paragraphes :

La plupart des navigateurs ont un processus de traitement unique partagé entre deux tâches : la tâche JavaScript et la tâche de mise à jour de l'interface utilisateur. Une seule de ces opérations est effectuée à la fois, ce qui signifie que l'interface utilisateur ne peut pas réagir aux entrées pendant l'exécution du code JavaScript, et vice versa. En d’autres termes, lorsque JavaScript est en cours d’exécution, l’interface utilisateur est « verrouillée ». La gestion du runtime JavaScript est importante pour les performances des applications Web.

Le processus partagé par les mises à jour de JavaScript et de l'interface utilisateur est souvent appelé « fil de discussion de l'interface utilisateur du navigateur ». Le travail du thread d'interface utilisateur est basé sur un système de file d'attente simple et les tâches sont enregistrées dans la file d'attente jusqu'à ce que le processus soit inactif. Une fois inactive, la tâche suivante dans la file d'attente est réextraite et exécutée. Ces tâches consistent soit à exécuter du code JS, soit à effectuer des mises à jour de l'interface utilisateur, y compris le redessinage et la redistribution.

function(){
    button.remove();
    func();    
}

Il s'agit de la fonction de traitement des événements de clic. Une fois que js a supprimé le nœud DOM, func() continuera à s'exécuter immédiatement. Après 10 secondes, le processus sera inactif avant l'exécution de la tâche suivante et l'interface utilisateur sera mise à jour uniquement. alors le bouton disparaîtra de la page.

Une question dans la zone de commentaire d'une autre réponse ci-dessus : « Pourquoi cela ne se produit-il pas lors de son ajout ? »

La fonction ajoutée est comme ça,

    createBtn: function (func) {
        var    button = $('<button>测试</button>'); //生成button
        button.bind("click",function(){   //给button绑点击事件
            button.remove();
            func();    
        });    
        $('body').prepend(button); //把button加到body上
    },

Ce processus n'exécute pas func(). Essayez de déplacer cette fonction et de la remplacer par ceci

.

    createBtn: function (func) {
        var    button = $('<button>测试</button>');
        button.bind("click",function(){
            button.remove();    
        });    
        $('body').prepend(button);
        func();
    },

Certainement bloqué aussi

Answer 2

Il se peut que vous ayez bloqué le fil de discussion, ce qui a bloqué le rendu graphique

Même si le bouton a été supprimé de l'arborescence dom.

Mais les graphiques n'ont pas redessiné la nouvelle arborescence DOM là où le bouton n'existe pas.

Answer 3

Je pensais que c'était simple avant. Cela devrait être la même chose que ce qui a été dit en bas, le rendu de l'écran était bloqué.
Par exemple, imprimez le journal avant func();:

console.log(func);

Une fois le logo de sortie affiché, il reste bloqué. Le contenu complet ne s'affiche pas tant que sleep n'est pas exécuté :

Lorsque la mise en veille est exécutée, la page est bloquée et ne peut pas être utilisée du tout. En même temps, l'utilisation du processeur est très élevée (car il n'y a en théorie aucun intervalle dans cette boucle). Cela peut être la raison pour laquelle elle est bloquée. .