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