為什么需要異步？why？來看一段代碼。

問題1：

for(var i=0;i<100000;i++){

}

alert('hello world!!!');

　　這段代碼的意思是執(zhí)行100...次后再執(zhí)行alert，這樣帶來的問題是，嚴(yán)重堵塞了后面代碼的執(zhí)行，至于為什么，主要是因?yàn)镴S是單線程的。

問題2：

　　我們通常要解決這樣一個(gè)問題，如果我們需要在head里面加入script代碼的話，一般會(huì)將代碼寫在window.onload里面（如果操作了dom的話），你有沒有想過，為什么要加window.onload？原因就是你在操作dom的時(shí)候script后面的html代碼瀏覽器還沒有開始加載，結(jié)果人家還沒有出生你就想著去娶她，這可能嗎？當(dāng)然不可能，加上window。onload之所以可以是因?yàn)椋?code>window.onload里面的代碼是在文檔全部加載完畢后執(zhí)行的，也就相當(dāng)于異步。

問題3：

　　有時(shí)候頁面并不需要一次性把所有的代碼都加載，更多的時(shí)候我們是按照某個(gè)需求才去加載某段代碼的。 

什么是單線程？

　　你可以這樣理解單線程就是代碼一段一段的執(zhí)行，先執(zhí)行前面的，前面的執(zhí)行完了再執(zhí)行后面的。 

那JS中有哪些是異步的呢？

　　我相信這個(gè)東西，幾乎都用爛了，它就是setTimeout/setInterval當(dāng)然還有Ajax，Ajax異步我相信大家都知道，當(dāng)然也可以同步但沒人那么去做，但是對于setTimeout和setInterval是異步可能有些小伙伴不同了解，下面說說為什么說setTimeout是異步的。

setTimeout(function(){
　　console.log(0);
},0)

console.log(1);

// 1

// 0

運(yùn)行這段代碼后先打印的是1，而不是0，有些小伙伴是不是開始迷惑了，這里我們雖然給setTimeout設(shè)置的是0秒后執(zhí)行console.log(0)  ，但是這個(gè)setTimeout很特別，因?yàn)樗钱惒降?，我們先拋開這里為什么打印的是1然后才是0，先來聊聊什么是異步。 

什么是異步？

　　比方說有些飯店你去吃飯需要提前預(yù)定，等其他人吃完你才能去，因此在其他人吃飯的時(shí)候你可以去干其他的事情，等其他人吃完了會(huì)有人來通知你，于是你可以去了，那么對于代碼來說，如ajax，你定義了一個(gè)回調(diào)方法，這個(gè)回調(diào)方法并不會(huì)當(dāng)時(shí)就去執(zhí)行，而是等待服務(wù)器響應(yīng)完成之后才會(huì)去執(zhí)行這段代碼。 

我們回到前面那段setTimeout身上，它的工作原理是這樣的，當(dāng)你定義setTimeout那一刻起（不管時(shí)間是不是0），js并不會(huì)直接去執(zhí)行這段代碼，而是把它扔到一個(gè)事件隊(duì)列里面，當(dāng)頁面中所有同步任務(wù)都干完了以后，才會(huì)去執(zhí)行事件隊(duì)列里面的代碼。什么是同步，除了異步代碼就是同步—_—。 

JS怎么實(shí)現(xiàn)異步？

　　1.利用setTimout實(shí)現(xiàn)異步　　　　

setTimeout(function(){
　　console.log(document.getElementByTagName('body')[0]);
},0)

　　但是setTimeout有些小小的問題，就是時(shí)間不精確，如果你想更快的執(zhí)行這段代碼我們可以使用html5提供的一個(gè)函數(shù)?！　?/p>

requestAnimationFrame(function(){
　　console.log(document.getElementByTagName('body')[0]);
})

　　requestAnimationFrame和setTimeout的區(qū)別就在于requestAnimationFrame比setTimeout更快執(zhí)行，因此很多人用requestAnimationFrame來制作動(dòng)畫。

　　2.動(dòng)態(tài)創(chuàng)建script標(biāo)簽　　

var head = document.getElementByTagName('head')[0];
var script = document.createElement('script');
script.src = '追夢子.js';
head.appendChild('script');

 　 3.利用script提供的defer/async

  <script src="xx.js" defer></script>

　　defer:當(dāng)頁面加載完畢以后才去執(zhí)行這段代碼。

　　<script src="xx.js" async></script>

　　async:異步執(zhí)行script代碼

不過異步也是缺點(diǎn)的，比如下面這段代碼：

　　正常代碼：　　　　

try{
　　throw new Error('hello world');
}catch(err){
　　console.log(err);
}

// Error: hello world(…)

　　異步代碼：　　

try{
　　setTimout(function(){
　　　　throw new Error('hello world');
　　},0)
}catch(err){
　　console.log(err);
}

// ReferenceError: setTimout is not defined(…)

可以發(fā)現(xiàn)catch里面的代碼并沒有執(zhí)行，也就是說try無法捕獲異步里面的代碼。

總結(jié)

關(guān)于JS中的異步以及如何異步到這就基本結(jié)束，關(guān)于JS的異步算是老生常談了，但是還是希望本文的內(nèi)容對大家能有一些幫助。

最新評論