ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript ブロックの問題

JavaScript ブロックの問題

hzc
hzc転載
2020-06-13 09:23:155385ブラウズ

JavaScript がプログラムの実行をブロックします

JavaScript スレッドの問題


JavaScript はシングルスレッドであり、 JS プログラムはプログラム プロセス全体を取り上げ、通常は非同期プログラミングを通じてプログラムのブロックを減らすためにあらゆる手段を試みますが、一部の特殊なシナリオではプログラムの実行をブロックする必要があるため、今日はその逆を行います。 Js の実行をブロックする通常の方法。

方法 1: 無限ループ


  • シングルスレッド JavaScript は、プログラムが計算を続ける限り、私たちにインスピレーションを与えてくれます。プロセス:

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();
  • しかし、このメソッドは実際には、コンピューターのリソースを無期限に占有することにより、一時停止アニメーションの状態を引き起こします。大量の CPU を使用するため、プログラム プロセスを実際に停止しない限り、この方法はお勧めできません。

#メソッド 2: setTimeout


  • setTimeout コールバックを直接使用して、プログラムのプロセスをブロックします。もちろん、プログラムが続行して CPU をアイドル状態にすることはできませんが、この書き方は同期プログラミング手法ではありません:

  • function test() {
        console.log(&#39;sleep&#39;);
        setTimeout(function() {
            console.log(&#39;run&#39;);
        }, 10000)
    }
    
    await
  • ES 非同期プログラミングPromise や await などは上級版で登場し、プログラムをよりエレガントに記述できます。これも setTimeout を使用して解決する必要があります。この方法を使用することをお勧めします:

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

方法 3: ジェネレーターと yield


  • ES6 イテレーターにも非同期プログラミング機能がありますが、この記述方法は非常にわかりにくく、理解するのが困難です。

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

上記の方法は 2 つのタイプに要約できます。1 つは、Js のシングル スレッド メカニズムを使用する方法です。もう 1 つは、イベント メカニズムに Js Advanced 非同期プログラミング構文の非同期性を使用することです。もちろん、実際のビジネスシーンで JS プロセスをブロックすることはほとんどなく、ユーザーが UI を介して操作を続行することを禁止することもよくありますが、この種の探索は、JS の基本原理を理解するためのものであり、JS をよく理解するのに役立ちます。

推奨チュートリアル: 「

JS チュートリアル

以上がJavaScript ブロックの問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はjuejin.cnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。