この記事では、JavaScript での非同期プログラミングについて紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。
非同期とは非同期を意味します....
このセクションは少し退屈かもしれませんが、JavaScript では非常に重要な概念であり、非常に重要です。役に立つので、学ぶ必要があります。
#目的
- 開発効率を向上させ、保守しやすいコードを作成します
導入の質問
- リクエスト時にページが停止するのはなぜですか? ?
$.ajax({ url: "www.xx.com/api", async: false, // true success: function(result) { console.log(result); }, });
- データは更新されるのに、DOM が更新されないのはなぜですか? ?
// 异步批量更新DOM（vue-nextTick） // <p id="app">{{num}}</p> new Vue({ el: "#app", data: { num: 0, }, mounted() { let dom = document.getElementById("app"); while (this.num !== 100) { this.num++; } console.log("Vue num=" + this.num, "DOM num=" + dom.innerHTML); // Vue num=100,DOM num=0 // nextTick or setTimeout }, });
非同期生成の理由
原因: シングル スレッド (1 つの時点で 1 つのことだけを行う)、ブラウザの JS エンジンがシングル スレッドである引き起こされた。シングル スレッドとは、JS エンジンで IavaScript コードの解釈と実行を担当するスレッドが 1 つだけあることを意味します。これをメイン スレッドと呼ぶこともできます。
いわゆるシングル スレッドとは、一度に 1 つのタスクのみを完了できることを意味します。複数のタスクがある場合は、それらをキューに入れる必要があり、前のタスクが完了してから次のタスクが実行されます。 まずブラウザ カーネルのスレッド図を見てください。
レンダリング スレッドと JS スレッドがあります。 は相互に排他的です。
DOM ノードを変更と削除の 2 つの関数が同時に操作しているとします。複数のスレッドがある場合、2 つのスレッドが同時に実行されると、必ずデッドロックが発生します。そして問題も起こるだろう。 JS がシングルスレッドとして設計されるべき理由は、ブラウザーの特殊な環境のためです。 シングル スレッドの長所と短所: このモードの利点は、実装が比較的簡単で、実行環境も比較的シンプルであることです。欠点は、 1 つのタスクに時間がかかると、後続のタスクをキューに入れて待機する必要があり、プログラム全体の実行が遅れます。一般的なブラウザの応答不能 (サスペンドデス) は、特定の Javascript コードが長時間実行される (無限ループなど) ことが原因で発生することが多く、その結果、ページ全体がその場所でスタックし、他のタスクが実行できなくなります。一般的な障害 (無限ループ):
while (true) {}JS はもともとブラウザーで実行されるスクリプト言語として設計されていたため、それほど複雑にはしたくありませんでした。これは単一のスレッドになりました。つまり、は一度に 1 つのことしか実行できません。
シングルスレッドブロッキングを解決するにはこの欠点: 非同期が生成されます。 インスタント ラーメンを食べる例を挙げます。
同期: インスタント ラーメンを買う => 水を沸騰させる (見つめる) => 麺を調理する => インスタント ラーメンを食べる- 非同期 : インスタント ラーメンを買う => 水を沸騰させる (水が沸騰し、やかんが鳴る - コールバック) => テレビを見る => 麺を調理する (麺の準備ができてやかんが鳴る - コールバック) => テレビを見る => 時間が来たら電話する完了 => インスタント ラーメンを食べる
- テレビを見ることは非同期操作であり、やかんの音はコールバック関数です。
JS のコードの大部分は同期的に実行されます。非同期で実行される関数はほんのわずかです。非同期で実行されるコードには非同期プログラミングが必要です。
非同期コード
setTimeout(() => {
console.log("log2");
}, 0);
console.log("log1");
// ?? log1 log2非同期コードの特徴:
コードはすぐには実行されませんが、待機して将来の特定の時点で実行される必要があります。
| #非同期コード |
|---|
