この記事では、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) {}は一度に 1 つのことしか実行できません。
シングルスレッドブロッキングを解決するにはこの欠点: 非同期が生成されます。 インスタント ラーメンを食べる例を挙げます。
同期: インスタント ラーメンを買う => 水を沸騰させる (見つめる) => 麺を調理する => インスタント ラーメンを食べるsetTimeout(() => {
console.log("log2");
}, 0);
console.log("log1");
// ?? log1 log2| #非同期コード | |
|---|---|
ネットワーク リクエスト (Ajax) | I/O 操作 |
| レンダリング操作 | |
| ##async/await |
HTTP ネットワーク リクエスト (リクエストは成功し、識別後に xx 操作が実行されます)
// 注意到click方法中是一个函数而不是一个变量
// 它就是回调函数
$("#btn_1").click(function() {
alert("Btn 1 Clicked");
});
// 或者
function click() {
// 它就是回调函数
alert("Btn 1 Clicked");
}
$("#btn_1").click(click);
非同期プログラミングの 3 つの方法
function getOneNews() {
$.ajax({
url: topicsUrl,
success: function(res) {
let id = res.data[0].id;
$.ajax({
url: topicOneUrl + id,
success: function(ress) {
console.log(ress);
render(ress.data);
},
});
},
});
}function getOneNews() {
axios
.get(topicsUrl)
.then(function(response) {
let id = response.data.data[0].id;
return axios.get(topicOneUrl + id);
})
.then((res) => {
render(res.data.data);
})
.catch(function(error) {
console.log(error);
});
}async function getOneNews() {
let listData = await axios.get(topicsUrl);
let id = listData.data.data[0].id;
let data = await axios.get(topicOneUrl + id);
render(data.data.data);
}質問がありますか? ?
マクロ タスクとマイクロ タスク
| マイクロ タスク (急いでいる) | |
|---|---|
| setTimeout/setInterval|
事件循环（Event loop）
执行顺序：
重复从宏任务和微任务队列里拿出任务去执行。 总结因为浏览器设计的原因，JS 线程和渲染线程互斥，所以 JS 线程被设计成了单线程。 因为单线程执行一些操作（如网络请求）时有堵塞的问题，所有产生了异步。 因为有了异步，所以产生了异步编程，从而有了回调函数。 因为回调函数写多了会产生回调地狱，所有又有了解决回调地狱的 Promise 写法 自 ES7 标准后有了比 Promise 更加优雅的写法 ———— async/await 写法，也是异步编程的最终解决方法。 因为 JS 的代码分为同步和异步代码，同步代码的执行顺序不必多说，自上而下的执行。 但是如果有多个异步的代码，他的执行顺序又是怎么的呢？？ 为了解决多个异步代码的执行顺序问了，有了事件循环（EventLoop），将异步任务区分为宏任务、微任务，依据规则依次执行。 至此 完！ 练习console.log("script start");
setTimeout(function() {
console.log("timeout1");
}, 10);
new Promise((resolve) => {
console.log("promise1");
resolve();
setTimeout(() => console.log("timeout2"), 10);
}).then(function() {
console.log("then1");
});
console.log("script end");ログイン後にコピー 写出 log 的输出结果，并说出理由。 更多编程相关知识，请访问：编程视频！！ 以上がJavaScript の非同期プログラミングをステップごとに理解します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
関連ラベル：
ソース：segmentfault.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド
img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります
から 2024-04-06 19:25:49
0
1
505
d3.js でズームインすると散布図のポイントの値が維持されない
d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
ベンダー固有の疑似要素上の JavaScript ホバー イベント
次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
から 2024-04-06 15:35:24
0
1
274
関連トピック
詳細>
|
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
