Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Erläuterung von nativem JS asynchron und Single-Threaded

小云云
Freigeben: 2018-03-07 14:40:50
Original
1846 Leute haben es durchsucht

Was ist asynchron (im Vergleich zu synchron)? In diesem Artikel wird hauptsächlich die detaillierte Erklärung von nativem JS asynchron und Single-Threaded erläutert.

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

Wann ist Asynchronität erforderlich?

--Wann kann es zu Wartezeiten kommen

--Während des Wartevorgangs kann die Ausführung des Programms nicht wie eine Warnung blockiert werden

--Alle „Wartesituationen“ erfordern also asynchrone

Szenarien, in denen das Front-End asynchrone

Geplante Aufgaben verwendet:

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
Nach dem Login kopieren

Die Szenarien, in denen Die Front-End-Anwendungen sind asynchron: Welche

geplante Aufgaben: setTimeout, setInterval

Ajax-Anfrage, IMG-Laden

Ereignisbindung

Verwandte Empfehlungen:

Detaillierte Erklärung der asynchronen JS-Programmierung mit Beispielen

Mehrere Probleme im Zusammenhang mit dem asynchronen Laden von JavaScript

Detaillierte Erklärung einzelner -threaded JS-Ausführungsprobleme

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von nativem JS asynchron und Single-Threaded. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!