国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

再談Javascript中的異步以及如何異步

2019-11-20 09:11:37
字體:
來源:轉載
供稿:網友

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

問題1:

for(var i=0;i<100000;i++){}alert('hello world!!!');

  這段代碼的意思是執行100...次后再執行alert,這樣帶來的問題是,嚴重堵塞了后面代碼的執行,至于為什么,主要是因為JS是單線程的。

問題2:

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

問題3:

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

什么是單線程?

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

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

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

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

運行這段代碼后先打印的是1,而不是0,有些小伙伴是不是開始迷惑了,這里我們雖然給setTimeout設置的是0秒后執行console.log(0)  ,但是這個setTimeout很特別,因為它是異步的,我們先拋開這里為什么打印的是1然后才是0,先來聊聊什么是異步。 

什么是異步?

  比方說有些飯店你去吃飯需要提前預定,等其他人吃完你才能去,因此在其他人吃飯的時候你可以去干其他的事情,等其他人吃完了會有人來通知你,于是你可以去了,那么對于代碼來說,如ajax,你定義了一個回調方法,這個回調方法并不會當時就去執行,而是等待服務器響應完成之后才會去執行這段代碼。 

我們回到前面那段setTimeout身上,它的工作原理是這樣的,當你定義setTimeout那一刻起(不管時間是不是0),js并不會直接去執行這段代碼,而是把它扔到一個事件隊列里面,當頁面中所有同步任務都干完了以后,才會去執行事件隊列里面的代碼。什么是同步,除了異步代碼就是同步―_―。 

JS怎么實現異步?

  1.利用setTimout實現異步    

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

  但是setTimeout有些小小的問題,就是時間不精確,如果你想更快的執行這段代碼我們可以使用html5提供的一個函數?! ?/p>

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

  requestAnimationFrame和setTimeout的區別就在于requestAnimationFrame比setTimeout更快執行,因此很多人用requestAnimationFrame來制作動畫。

  

  2.動態創建script標簽  

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:當頁面加載完畢以后才去執行這段代碼。

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

  async:異步執行script代碼

  

不過異步也是缺點的,比如下面這段代碼:

  正常代碼:    

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(…)

可以發現catch里面的代碼并沒有執行,也就是說try無法捕獲異步里面的代碼。

總結

關于JS中的異步以及如何異步到這就基本結束,關于JS的異步算是老生常談了,但是還是希望本文的內容對大家能有一些幫助。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 呼玛县| 万盛区| 讷河市| 沭阳县| 定西市| 邓州市| 克东县| 兰西县| 九龙坡区| 松潘县| 司法| 喀喇| 金昌市| 开平市| SHOW| 阿坝县| 三明市| 宜丰县| 原平市| 周宁县| 鄱阳县| 禹城市| 黄骅市| 都江堰市| 宾阳县| 新余市| 洛川县| 城市| 榆树市| 临城县| 化隆| 高清| 丹巴县| 玉田县| 思茅市| 宜章县| 韶关市| 惠州市| 绿春县| 平遥县| 江山市|