JavaScript イベントループの同期タスクと非同期タスク-jsチュートリアル-php.cn

JavaScript イベントループの同期タスクと非同期タスク

WBOY

リリース： 2022-09-01 20:13:33

転載

1875 人が閲覧しました

この記事では、javascript に関する関連知識を提供します。主に JavaScript イベントループの同期タスクと非同期タスクを紹介します。この記事では、このトピックに関する詳細な紹介が提供されており、一定の参考価値があります。それを参照できます。

JavaScript イベントループの同期タスクと非同期タスク

[関連する推奨事項: JavaScript ビデオチュートリアル、Web フロントエンド ]

序文

まず、js の同期と非同期の問題について学ぶ前に、js がシングルスレッドであることを理解する必要があります。なぜシングルスレッドである必要があるのでしょうか?これは使用シナリオによって異なりますが、主にユーザーがページを操作できるようにするために使用されます。 js がマルチスレッドであると仮定すると、このスレッドではユーザーがボタンをクリックして DOM ノードが追加され、別のスレッドではユーザーがボタンをクリックして DOM ノードが削除されます。その場合、js は何をリッスンすればよいのかわかりません。今度は誰の。では、同期と非同期が登場する理由は何でしょうか?非同期がないとすると、サーバーにデータをリクエストすると、ネットワークの状態が悪くて長時間停止する可能性がありますが、このとき、Web ページは同期なので、データリクエストが戻ってくるまで待つ必要があります。ユーザーとの対話を続けることができます。これにより、Web ページ全体が非常に忙しくなり、奇妙にスタックし、ユーザーエクスペリエンスが非常に悪くなります。

実行スタックとタスクキュー

実行スタック

実行スタックとは何かという話ではなく、スタックとは何かについて話しましょう。スタックはバケツのようなもので、最初に入れたものが最後に取り出される必要があります。これは、よく「先入れ後出し」と呼ばれるものです。

JavaScript イベントループの同期タスクと非同期タスク

# 次に、実行スタックが画像内のコンテンツブロックをコードタスクに変換します。 :

function fn (count) {
            if (count <= 0) return
            fn(count - 1)
            console.log(count)
        }
fn(3)

ログイン後にコピー

これは非常に単純な再帰コードです。ここでは図で直接説明します (実際、ここでの図は厳密ではありません。スタックの一番下にある必要があります)グローバル実行コンテキストになります):

JavaScript イベントループの同期タスクと非同期タスク

js 内のすべてのタスクはメインスレッドで実行され、実行スタックを形成します

。 (これを覚えておいてください!!!)

タスクキュー

この場合、キューとスタックは逆になり、キューは先入れ先出しになります。実は、これはわかりやすいのですが、通常の行列と同じで、最初に列に入った人が先に出なければなりません。次に、タスクキューの一般的な理解は、

非同期タスクのコールバック関数を配置するために使用されます。 (これも覚えておいてください!!!)

同期タスクと非同期タスク

概念的なものから始めて基礎を築きましょう:

同期タスク

同期タスクを理解するときに、そのセマンティクスによって混乱する人が多くいますが、実際には、同期タスクは同時に実行されません。これは、次のタスクを実行する前に、前の実行タスクが終了するのを待つことです。ここで言うのは曖昧ではありませんが、説明するために簡単なコードを書いてみましょう:

console.log(1)
console.log(2)
console.log(3)

ログイン後にコピー

コードは非常に単純です。当然のことです。出力結果は

1, 2, 3 です。これが同期コードです。次に要約します。同期タスクはメインスレッドのキューに入れられ、1 つずつ実行スタックに入力されます実行スタックが空になるまで実行されます。

非同期タスク

直接的な例を示します:

console.log(1)
setTimeout(() => {
    console.log(2)
}, 1000)
console.log(3)

ログイン後にコピー

このコードの出力は、上記の同期コードの出力とは異なります。 order is

1, 3, 2. This is asynchronous code. It will not be created in the order of execution.

同様に、公式の言葉で要約しましょう: 非同期タスクとは、メインスレッドには入らず「タスクキュー」(イベントキュー)に入るタスクを指します。「タスクキュー」がメインスレッドに非同期タスクの実行可能を通知した場合にのみ、タスクはメインスレッドに入ります。実行のために。 理解できていなくても大丈夫です。後でイベントループについて説明するときに理解できるようになります。

JS 実行メカニズム

よりあいまいな概念から始めましょう:

1. 同步任务由JavaScript 主线程按顺序执行。
2. 异步任务委托给宿主环境执行。
3. 异步任务完成后，对应的回调函数会被加入到任务队列中等待执行，任务队列又被分为宏任务队列和微任务队列，优先执行微任务队列，常见的微任务有new Promise().then,常见的宏任务有定时器
4. JavaScript 主线程的执行栈被清空后，会读取任务队列中的回调函数，次序执行。
5. JavaScript 主线程不断重复上面的第4 步，在执行回调函数时又会按照上面的四步去执行。

js一直从任务队列中取回调函数，然后放入主线程中执行，这是一个循环不断的过程，所以把它叫做事件循环。

这个还是要简单粗暴的来段代码会更直观一点：

const promise = new Promise((resolve, reject) => {
      console.log(1);
      setTimeout(() => {
          console.log("timerStart");
          resolve("success");
          console.log("timerEnd");
       }, 0);
      console.log(2);
  });
  promise.then((res) => {
      console.log(res);
  });
  console.log(4);

ログイン後にコピー

现在我们根据上面的规则一步一步分析这段代码，如果不懂Promise也没有关系，我保证这并不影响你对事件循环的理解。现在你就把自己当成js代码的检察官，要正确把它们放在合适的“位置”

检察官的第一步就是判断哪些是同步代码，哪些是异步代码，OK，首先从上往下看，Promise本身是同步的，所以它应该在主线程上排队，然后继续看pomise.then是个异步任务，并且是属于微任务的，它的回调函数应该在微任务队列中(此时还不在)，最后一句输出语句是同步代码，应该在主线程上排队。
第二步，执行主线程上的同步代码，首先有Promise排着队呢，所以先输出1，随后有个定时器，所以应该把它挂起执行，由于它没有时间延迟，所以回调函数直接被放入宏任务队列，继续执行代码，遇到打印，直接输出2。现在主线程还有其他的同步代码不？是不是还有一个输出语句，所以输出4，现在主线程上的同步代码执行完了
第三步读取任务队列，由于微任务队列上没有东西(Promise的状态并没有改变，不会执行promise.then()),所以读取宏任务队列上的回调函数，回调函数进入主线程执行，首先输出timerStart，然后promise状态发生改变，然后又遇到一个输出语句，输出timerEnd。现在主线程上又没有东西了，又得去看任务队列上有没有东西了。
第四步，由于promise状态发生改变了，所以微任务队列上有回调函数了，执行输出语句，res为success，输出success

【相关推荐：javascript视频教程、web前端】

以上がJavaScript イベントループの同期タスクと非同期タスクの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。