整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          JavaScript事件循環:同步任務和異步任務

          avaScript 是一門單線程執行的編程語言。也就是說,同一時間只能做一件事情。如果前一個任務非常耗時,則后續的任務就不得不一直等待,從而導致程序假死的問題。

          所以為了防止某個耗時任務導致程序假死的問題,JavaScript 把待執行的任務分為了兩類:

          1. 同步任務(synchronous)

          又叫做非耗時任務,指的是在主線程上排隊執行的那些任務,只有前一個任務執行完畢,才能執行后一個任務。

          2. 異步任務(asynchronous)

          又叫做耗時任務,異步任務由JavaScript 委托給宿主環境進行執行,當異步任務執行完成后,會通知JavaScript 主線程執行異步任務的回調函數。

          同步任務和異步任務的執行過程:

          ①同步任務由JavaScript 主線程次序執行。

          ②異步任務委托給宿主環境執行。

          ③已完成的異步任務對應的回調函數,會被加入到任務隊列中等待執行。

          ④JavaScript 主線程的執行棧被清空后,會讀取任務隊列中的回調函數,次序執行。

          ⑤JavaScript 主線程不斷重復上面的第4 步。

          JavaScript 主線程從“任務隊列”中讀取異步任務的回調函數,放到執行棧中依次執行。這個過程是循環不斷的,所以整個的這種運行機制又稱為EventLoop(事件循環)。

          import thenFs from ' then-fs '
          
          
          console 
          log('A')
          thenFs. readFile(' ./files/1.txt', 'utf8' ). then(dataStr => {
          
          
          console.log('B')
           })
          setTimeout(( ) => {
          console. log('C' )
          },0)
          console.log( 'D')

          正確的輸出結果:ADCB。

          其中:

          A 和D 屬于同步任務。會根據代碼的先后順序依次被執行。

          C 和B 屬于異步任務。它們的回調函數會被加入到任務隊列中,等待主線程空閑時再執行。

          為前端人員要回答這個問題,需要了解這三個知識點:

          • 同步
          • 異步
          • Async/Await

          首先,js 是單線程的,所謂單線程,通俗的講就是,執行代碼是一行一行的往下走(即所謂的同步)

          js的核心就是單線程,新出的一些標準(web worker、atomics、SharedArrayBuffer等),允許JavaScript腳本創建多個線程,但是子線程完全受主線程控制,且不得操作DOM。所以,這個新標準并沒有改變JavaScript單線程的本質,類比一下node也是單線程,在準確的說是單線程異步非阻塞模式

          上面僅僅是一個 for 循環,而在實際應用中,會有大量的網絡請求,它的響應時間是不確定的,這種情況下也要一直等么?顯然是不行的,因而 js 設計了異步,即 發起網絡請求(諸如 IO 操作,定時器),由于需要等服務器響應,就先不理會,而是去做其他的事兒,等請求返回了結果的時候再說(即異步)。

          那么如何實現異步呢?其實我們平時已經在大量使用了,那就是 callback,例如:

          $.ajax({

          url: 'http://xxx',

          success: function(res) {

          console.log(res);

          },

          });

          success 作為函數傳遞過去并不會立即執行,而是等請求成功了才執行,即回調函數callback

          const fs = require('fs');
          fs.rename('舊文件.txt', '新文件.txt', err => {
           if (err) throw err;
           console.log('重命名完成');
          });
          

          和網絡請求類似,等到 IO 操作有了結果(無論成功與否)才會執行第三個參數:(err)=>{}

          從上面我們就可以看出,實現異步的核心就是回調鉤子,將 cb 作為參數傳遞給異步執行函數,當有了結果后在觸發 cb。想了解更多,去看看 event-loop 機制吧。

          至于 async/await 是如何出現的呢,在 es6 之前,大多 js 數項目中會有類似這樣的代碼:

          ajax1(url, () => {
           ajax2(url, () => {
           ajax3(url, () => {
           // do something
           });
           });
          });
          

          這種函數嵌套,大量的回調函數,使代碼閱讀起來晦澀難懂,不直觀,形象的稱之為回調地獄(callback hell),所以為了在寫法上能更通俗一點,es6+陸續出現了 Promise、Generator、Async/await,力求在寫法上簡潔明了,可讀性強。

          async/await 是參照 Generator 封裝的一套異步處理方案,可以理解為 Generator 的語法糖,

          所以了解 async/await 就不得不講一講 Generator,

          而 Generator 又依賴于迭代器Iterator,

          所以就得先講一講 Iterator,

          而 Iterator 的思想呢又來源于單向鏈表,

          終于找到源頭了:單向鏈表

          1. 單向鏈表

          wiki:鏈表(Linked list)是一種常見的基礎數據結構,是一種線性表,但是并不會按線性的順序儲存數據,而是在每一個節點里存到下一個節點的指針(Pointer)。由于不必須按順序儲存,鏈表在插入的時候可以達到 o(1)的復雜度,比另一種線性表順序表快得多,但是查找一個節點或者訪問特定編號的節點則需要 o(n)的時間,而順序表響應的時間復雜度分別是 o(logn)和 o(1)。

          總結一下鏈表優點:

          • 無需預先分配內存
          • 插入/刪除節點不影響其他節點,效率高(典型的例子:dom 操作)

          單向鏈表:是鏈表中最簡單的一種,它包含兩個域,一個信息域和一個指針域。這個鏈接指向列表中的下一個節點,而最后一個節點則指向一個空值。

          一個單向鏈表包含兩個值: 當前節點的值和一個指向下一個節點的鏈接

          單鏈特點:節點的鏈接方向是單向的;相對于數組來說,單鏈表的的隨機訪問速度較慢,但是單鏈表刪除/添加數據的效率很高。

          理解 js 原型鏈/作用域鏈的話,理解這個很容易,他們是相通的。

          那么如何設計一個單向鏈表呢?這個取決于我們需要哪些操作,通常有:

          • append(element):追加節點
          • insert(element,index):在索引位置插入節點
          • remove(element):刪除第一個匹配到的節點
          • removeAt(index):刪除指定索引節點
          • removeAll(element):刪除所有匹配的節點
          • get(index):獲取指定索引的節點信息
          • set(element,index):修改指定索引的節點值
          • indexOf(element):獲取某節點的索引位置
          • clear():清除所有節點
          • length():返回節點長度
          • printf():打印節點信息

          看到這些方法是不是有些許熟悉,當你用原生 js 或 jq 時常會用上面類似的方法,現在根據上面列出的方法進行實現一個單向鏈:

          通過以上,我假裝你明白什么是單向鏈表,并且能夠用代碼實現一個單向鏈表了,下一步開始說一說迭代器 Iterator

          2. Iterator

          Iterator 翻譯過來就是**迭代器(遍歷器)**讓我們先來看看它的遍歷過程(類似于單向鏈表):

          • 創建一個指針對象,指向當前數據結構的起始位置
          • 第一次調用指針對象的 next 方法,將指針指向數據結構的第一個成員
          • 第二次調用指針對象的 next 方法,將指針指向數據結構的第二個成員
          • 不斷的調用指針對象的 next 方法,直到它指向數據結構的結束位置

          一個對象要變成可迭代的,必須實現 @@iterator 方法,即對象(或它原型鏈上的某個對象)必須有一個名字是 Symbol.iterator 的屬性(原生具有該屬性的有:字符串、數組、類數組的對象、Set 和 Map):

          當一個對象需要被迭代的時候(比如開始用于一個 for..of 循環中),它的 @@iterator 方法被調用并且無參數,然后返回一個用于在迭代中獲得值的迭代器

          迭代器協議:產生一個有限或無限序列的值,并且當所有的值都已經被迭代后,就會有一個默認的返回值

          當一個對象只有滿足下述條件才會被認為是一個迭代器:

          它實現了一個 next() 的方法,該方法必須返回一個對象,對象有兩個必要的屬性:

          • done(bool)

          true:迭代器已經超過了可迭代次數。這種情況下,value 的值可以被省略

          false:迭代器可以產生序列中的下一個值。這等效于沒有指定 done 這個屬性

          • value 迭代器返回的任何 JavaScript 值。done 為 true 時可省略

          根據上面的規則,咱們來自定義一個簡單的迭代器:

          我們還可以自定義一個可迭代對象:

          3. Generator

          Generator:生成器對象是生成器函數(GeneratorFunction)返回的,它符合可迭代協議和迭代器協議,既是迭代器也是可迭代對象,可以調用 next 方法,但它不是函數,更不是構造函數

          生成器函數(GeneratorFunction):

          function* name([param[, param[, ... param]]]) { statements }

          • name:函數名
          • param:參數
          • statements:js 語句

          調用一個生成器函數并不會馬上執行它里面的語句,而是返回一個這個生成器的迭代器對象,當這個迭代器的 next() 方法被首次(后續)調用時,其內的語句會執行到第一個(后續)出現 yield 的位置為止(讓執行處于暫停狀),yield 后緊跟迭代器要返回的值?;蛘呷绻玫氖?yield*(多了個星號),則表示將執行權移交給另一個生成器函數(當前生成器暫停執行),調用 next() (再啟動)方法時,如果傳入了參數,那么這個參數會作為上一條執行的 yield 語句的返回值,例如:

          看到這里,你可能會問,Generator 和 callback 有啥關系,如何處理異步呢?其實二者沒有任何關系,我們只是通過一些方式強行的它們產生了關系,才會有 Generator 處理異步

          我們來總結一下 Generator 的本質,暫停,它會讓程序執行到指定位置先暫停(yield),然后再啟動(next),再暫停(yield),再啟動(next),而這個暫停就很容易讓它和異步操作產生聯系,因為我們在處理異步時:開始異步處理(網絡求情、IO 操作),然后暫停一下,等處理完了,再該干嘛干嘛。不過值得注意的是,js 是單線程的(又重復了三遍),異步還是異步,callback 還是 callback,不會因為 Generator 而有任何改變

          下面來看看,用 Generator 實現異步:

          // g1: { value: Promise { <pending> }, done: false }
          // res1: {
          // "a": 1
          // }
          // {
          // "a": 1
          // }
          // g2: { value: Promise { <pending> }, done: false }
          // res2: {
          // "b": 2
          // }
          // {
          // "b": 2
          // }
          

          以上代碼是 Generator 和 callback 結合實現的異步,可以看到,仍然需要手動執行 .then 層層添加回調,但由于 next() 方法返回對象 {value: xxx,done: true/false} 所以我們可以簡化它,寫一個自動執行器:

          說了這么多,怎么還沒有到 async/await,馬上來了(其實我已經漏了一些內容沒說:Promise 和 callback 的關系,thunk 函數,co 庫,感興趣的可以去 google 一下,yuanyifeng 老師講的es6 入門非常棒,我時不時的都會去看一看)

          首先,async/await 是 Generator 的語法糖,上面我是分割線下的第一句已經講過,先來看一下二者的對比:

          可以看到,async function 代替了 function*,await 代替了 yield,同時也無需自己手寫一個自動執行器 run 了

          現在再來看看async/await 的特點:

          • 當 await 后面跟的是 Promise 對象時,才會異步執行,其它類型的數據會同步執行
          • 執行 const res = readFile(); 返回的仍然是個 Promise 對象,上面代碼中的 return 'done';會直接被下面 then 函數接收到
          res.then(data => {
           console.log(data); // done
          });
          

          啊,終于完了,一個 async-await 連帶出來這么多知識點,以后面試被問到它的原理時,希望能夠幫助到你

          者:雅克的一府

          來源:http://www.52rd.com/Blog/Detail_RD.Blog_imjacob_4832.html

          答案一:

          1.異步傳輸
          通常,異步傳輸是以字符為傳輸單位,每個字符都要附加 1 位起始位和 1 位停止位,以標記一個字符的開始和結束,并以此實現數據傳輸同步。所謂異步傳輸是指字符與字符(一個字符結束到下一個字符開始)之間的時間間隔是可變的,并不需要嚴格地限制它們的時間關系。起始位對應于二進制值 0,以低電平表示,占用 1 位寬度。停止位對應于二進制值 1,以高電平表示,占用 1~2 位寬度。一個字符占用 5~8位,具體取決于數據所采用的字符集。例如,電報碼字符為 5 位、ASCII碼字符為 7 位、漢字碼則為8 位。此外,還要附加 1 位奇偶校驗位,可以選擇奇校驗或偶校驗方式對該字符實施簡單的差錯控制。發送端與接收端除了采用相同的數據格式(字符的位數、停止位的位數、有無校驗位及校驗方式等)外,還應當采用相同的傳輸速率。典型的速率有:9 600 b/s、19.2kb/s、56kb/s等。
          異步傳輸又稱為起止式異步通信方式,其優點是簡單、可靠,適用于面向字符的、低速的異步通信場合。例如,計算機與Modem之間的通信就是采用這種方式。它的缺點是通信開銷大,每傳輸一個字符都要額外附加2~3位,通信效率比較低。例如,在使用Modem上網時,普遍感覺速度很慢,除了傳輸速率低之外,與通信開銷大、通信效率低也密切相關。
          --------------------------------------------------------------------------------
          2. 同步傳輸
          通常,同步傳輸是以數據塊為傳輸單位。每個數據塊的頭部和尾部都要附加一個特殊的字符或比特序列,標記一個數據塊的開始和結束,一般還要附加一個校驗序列(如16位或32位CRC校驗碼),以便對數據塊進行差錯控制。所謂同步傳輸是指數據塊與數據塊之間的時間間隔是固定的,必須嚴格地規定它們的時間關系。
          答案二:
          請講詳細一些,本人比較弱智,謝謝各位
          ---------------------------------------------------------------
          同步是阻塞模式,異步是非阻塞模式。
          ---------------------------------------------------------------
          我的理解:同步是指兩個線程的運行是相關的,其中一個線程要阻塞等待另外一個線程的運行。異步的意思是兩個線程毫無相關,自己運行自己的。
          不知對錯?樓下說
          ---------------------------------------------------------------
          同步是指:發送方發出數據后,等接收方發回響應以后才發下一個數據包的通訊方式。
          異步是指:發送方發出數據后,不等接收方發回響應,接著發送下個數據包的通訊方式。
          CSDN上有討論過:
          http://expert.csdn.net/Expert/topic/2646/2646592.xml?temp=.3842584
          http://expert.csdn.net/Expert/topic/2659/2659726.xml?temp=.1480219
          ---------------------------------------------------------------
          舉個不太恰當的例子,就像:
          SendMessage(...)
          TRACE0("just like send");
          PostMessage(...)
          TRACE0("just like WSASend using overlapped");
          SendMessage是調用的時候不返回,等消息響應后才執行TRACE0,這就是同步.
          PostMessage是調用后馬上返回,不用消息響應就執行TRACE0,這就是異步.


          答案三:

          同步和異步的區別

          舉個例子:普通B/S模式(同步)AJAX技術(異步)
          同步:提交請求->等待服務器處理->處理完畢返回 這個期間客戶端瀏覽器不能干任何事
          異步: 請求通過事件觸發->服務器處理(這是瀏覽器仍然可以作其他事情)->處理完畢
          ---------------------------------------------------------------

          同步就是你叫我去吃飯,我聽到了就和你去吃飯;如果沒有聽到,你就不停的叫,直到我告訴你聽到了,才一起去吃飯。
          異步就是你叫我,然后自己去吃飯,我得到消息后可能立即走,也可能等到下班才去吃飯。

          所以,要我請你吃飯就用同步的方法,要請我吃飯就用異步的方法,這樣你可以省錢。
          ---------------------------------------------------------------
          舉個例子 打電話時同步 發消息是異步


          主站蜘蛛池模板: 国精产品一区一区三区免费视频 | 午夜视频久久久久一区| 亚洲一区二区三区精品视频| 中文字幕日韩一区二区三区不| 风间由美性色一区二区三区| 日本一区二区三区在线观看视频 | 无码少妇丰满熟妇一区二区| 夜精品a一区二区三区| 国产在线观看一区二区三区精品| 亚洲一区二区三区深夜天堂 | 亚洲一区二区三区写真| 国产精品一区二区资源| 无码人妻精品一区二区三区在线 | 国产一区二区好的精华液 | 亚洲综合一区二区三区四区五区| 无码精品不卡一区二区三区| 久久精品无码一区二区三区日韩| 免费精品一区二区三区第35| 精品国产亚洲一区二区三区在线观看 | 成人精品视频一区二区三区不卡 | 国产剧情国产精品一区| 一区二区国产在线观看| 男人的天堂精品国产一区| 中文精品一区二区三区四区| 亚洲影视一区二区| 亚洲视频一区二区在线观看| 国内国外日产一区二区| 精品一区二区三区在线视频| 亚洲综合av永久无码精品一区二区| 日韩精品一区二区三区在线观看| 精品国产AV无码一区二区三区| 亚洲一区二区三区成人网站 | 极品少妇一区二区三区四区| 91久久精品无码一区二区毛片 | 亚洲av高清在线观看一区二区| 一区二区三区四区电影视频在线观看| 国产免费av一区二区三区| 风流老熟女一区二区三区| 日韩免费观看一区| 精品一区狼人国产在线| 日本中文字幕在线视频一区|