ホームページ  >  記事  >  ウェブフロントエンド  >  ネイティブJSの非同期とシングルスレッドの詳細な説明

ネイティブJSの非同期とシングルスレッドの詳細な説明

小云云
小云云オリジナル
2018-03-07 14:40:501842ブラウズ

非同期とは何ですか (同期と対比)? この記事では主にネイティブ JS の非同期とシングルスレッドについて詳しく説明します。お役に立てれば幸いです。

//异步
console.log(100);
setTimeout(function(){
console.log(200);
},1000);
console.log(300);
//同步
console.log(100);
alert(200);
console.log(300);//同步会阻塞等待

非同期の場合

-- 待機が発生する可能性がある場合

-- 待機プロセス中、アラートのようにプログラムの実行をブロックすることはできません

-- したがって、すべての「待機状況」には非同期が必要です

フロントエンド非同期タスクを使用するシナリオ

スケジュールされたタスク:

setTimeout/setInterval
console.log(100);
setTimeout(function(){
console.log(200)
},1000);
console.log(300);
//同步
console.log(100);
alert(200);
console.log(300);
网络请求:ajax请求,动态<img>加载
//ajax
console.log(&#39;start&#39;);
$.get(&#39;xxx&#39;,function(){
console.log(data);
})
console.log(&#39;end&#39;);//startenddata
//img
console.log(&#39;start&#39;);
var img = document.creatElement(&#39;img&#39;);
img.onload = function(){
console.log(loaded);
}
img.src = &#39;xxxxxxxxxxxxxxxx&#39;;
console.log(&#39;end&#39;)//startendloaded
事件绑定
console.log(&#39;start&#39;);
var btn1 = document.getElementById(&#39;btn1&#39;);
btn1.addEventListener(&#39;click&#39;,function(){
console.log(&#39;clicked&#39;);
})
console.log(&#39;end&#39;)
异步和单线程
同步和异步的区别?分别举一个同步和异步的例子
同步会阻塞代码执行,而异步不会
alert是同步,setTimeout是异步
一个关于setTimeout的笔试题
console.log(1);
setTimeout(function(){
console.log(2)
},0);
console.log(3);
setTimeout(function(){
console.log(4);
},1000);
console.log(5);
//13524

フロントエンドで非同期タスクを使用するシナリオとは何ですか?

スケジュールされたタスク: setTimeout、setInterval

ajax リクエスト、img 読み込み

イベント バインディング

関連する推奨事項:

例の詳細な説明 js 非同期プログラミング

いくつかの JavaScript 非同期読み込み関連の問題

シングルスレッド JS 実行の問題の詳細な説明

以上がネイティブJSの非同期とシングルスレッドの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。