Maison > interface Web > js tutoriel > problème de blocage javascript

problème de blocage javascript

hzc
Libérer: 2020-06-13 09:23:15
avant
5395 Les gens l'ont consulté

javascript bloque l'exécution du programme

Problème de thread javascript


JavaScript est monothread et l'exécution de un programme Js occupera tout le processus du programme, nous essayons généralement par tous les moyens de réduire le blocage du programme grâce à la programmation asynchrone, mais dans certains scénarios spéciaux, nous devons bloquer l'exécution du programme, nous ferons donc aujourd'hui le contraire et voyez comment ça se passe. Manière normale d'empêcher l'exécution de Js.

Méthode 1 : boucle infinie


  • JavaScript monothread peut nous inspirer tant que le programme continue de calculer, le programme peut être bloqué. Processus :

function sleep(d){  
    let t = Date.now();
    while(Date.now() - t <= d);  
}

function test() {
    console.log(&#39;sleep&#39;);
    sleep(10000);
    console.log(&#39;run&#39;);
}

test();
Copier après la connexion
  • Mais cette méthode provoque en réalité un état d'animation suspendue en occupant indéfiniment les ressources de l'ordinateur. beaucoup de CPU et cette méthode n'est pas recommandée sans arrêter réellement le processus du programme.

Méthode 2 : setTimeout


  • Nous utilisons directement le rappel setTimeout pour bloquer le processus du programme , bien sûr cela ne permet pas au programme de continuer et de rendre le CPU inactif, mais cette façon d'écrire n'est pas une méthode de programmation synchrone :

function test() {
    console.log(&#39;sleep&#39;);
    setTimeout(function() {
        console.log(&#39;run&#39;);
    }, 10000)
}

await
Copier après la connexion
  • ES Asynchrone des programmations telles que Promise et wait apparaissent dans la version avancée. Elles rendent l'écriture du programme plus élégante et doivent également être résolues à l'aide de setTimeout. Il est recommandé d'utiliser cette méthode :

  • <🎜. >
    function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
    
    async function test() {
        console.log(&#39;sleep&#39;);
        await sleep(10000);
        console.log(&#39;run&#39;);
    }
    
    test();
    Copier après la connexion

Méthode 3 : générateur et rendement


  • Les itérateurs ES6 ont également des capacités de programmation asynchrone, mais cette méthode d'écriture est assez obscure et difficile à comprendre, il est donc recommandé de l'utiliser avec parcimonie :

  • function sleep(time) {
        setTimeout(function () {
            test.next();
        }, time);
    }
    
    function* gen() {
        console.log(&#39;sleep&#39;);
        yield sleep(10000);
        console.log(&#39;10 second later&#39;);
    }
    
    let test = gen();
    test.next();
    Copier après la connexion
    Résumé

    Les méthodes ci-dessus peuvent être résumées en deux types, l'une consiste à utiliser le mécanisme à thread unique de Js de manière forcée ; l'autre consiste à utiliser le caractère asynchrone du mécanisme d'événement Js + la syntaxe de programmation asynchrone avancée. Bien sûr, nous utilisons rarement le blocage des processus JS dans des situations commerciales réelles. Nous interdisons souvent aux utilisateurs de poursuivre leurs opérations via l'interface utilisateur. Ce type d'exploration sert simplement à comprendre certains principes de base de JS et nous aide à bien le comprendre.

    Tutoriel recommandé : "

    Tutoriel JS"

    Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:juejin.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal