Maison  >  Article  >  interface Web  >  problème de blocage javascript

problème de blocage javascript

hzc
hzcavant
2020-06-13 09:23:155325parcourir

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();
  • 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
  • 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();

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();
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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer