本篇內容主要講解“什么是JS Generator 函數以及怎么用JS Generator 函數”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“什么是JS Generator 函數以及怎么用JS Generator 函數”吧!

創新互聯公司是一家專業提供吉首企業網站建設,專注與成都做網站、網站制作、H5建站、小程序制作等業務。10年已為吉首眾多企業、政府機構等服務。創新互聯專業的建站公司優惠進行中。

JS是什么

JS是JavaScript的簡稱，它是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，主要用于web的開發，可以給網站添加各種各樣的動態效果，讓網頁更加美觀。

還是那句話，所有事物的出現都是為了解決對應的問題。

那么Generator出現是為了解決什么問題的呢？

在異步編程的場景下，如果有多個異步任務，如何處理他們的先后執行順序？

舉一個常見的例子，jquery的ajax請求，每一個success都是一個異步任務。

那么問題來了，如果我要保證頁面渲染要在5個網絡請求都回來之后再去渲染頁面。

我們的代碼就會變成：

$.ajax({...success:function(data){
  $.ajax({...success:function(data){
    $.ajax({...success:function(data){
      $.ajax({...success:function(data){
        $.ajax({...success:function(data){
          //do something
        }})
      }})
    }})
  }})
}})

這就是”回調函數噩夢”（callback hell）

為了解決這個問題，后來出現了Deferred和promise

兩者區別不大，通過一種包裝寫法來減少回調函數

上面的ajax就可以寫成：

ajax1 = $.ajax({...success:function(data){});
ajax2 = $.ajax({...success:function(data){});
ajax3 = $.ajax({...success:function(data){});
ajax4 = $.ajax({...success:function(data){});
ajax5 = $.ajax({...success:function(data){});
$.when(ajax1,ajax2,ajax3,ajax4,ajax5).done(function(
  //do something
)).then(function(){
  //do something2
})

1.8版本以上的jquery ajax模塊默認返回Deferred對象

Deferred和promise將回調函數做拆分，將異步任務的處理和執行分成兩部分完成

他們大的問題就是代碼冗余，包裝之后的代碼都需要通過then，done來執行后面的內容，也導致層次感不清晰

那有沒有一種比較無感，簡單的寫法呢？

那就是協程，
我之前也是在這個地方困惑了很久，
前面說的大多日常用到過，也清楚一些原理，
關于協程用到的就少了，我們來分析下吧。

直接看一下協程的例子:

function asnycJob() {
 // ...其他代碼
 var f = yield readFile(fileA);
 // ...其他代碼
}

阮一峰老師的原話：

上面代碼的函數 asyncJob 是一個協程，它的奧妙就在其中的 yield 命令。它表示執行到此處，執行權將交給其他協程。也就是說，yield命令是異步兩個階段的分界線。 協程遇到 yield 命令就暫停，等到執行權返回，再從暫停的地方繼續往后執行。它的大優點，就是代碼的寫法非常像同步操作，如果去除yield命令，簡直一模一樣。

之前沒理解的原因就是沒好好讀這兩句話，今認真看了一下，茅塞頓開。重要的有這么幾點

首先asnycJob這個方法就是一個協程

yield相當于return，會返回當前程序的執行狀態

當執行到yield，程序掛起等待返回后繼續執行。

掛起這段時間去執行其他協程函數

Generator函數是ES6對協程函數的實現，

Generator函數的特點就是可以暫停代碼執行。

跟協程函數一樣，遇到yield關鍵字就暫停代碼執行，

跟普通函數的區別在于Generator函數不會反悔結果，而是返回指針對象，

通過指針的next方法移動指針指向下一個yield關鍵字位置。

也就是說Generator函數的分階段執行是由next方法控制的。

使用了Generator函數之后會對我們的代碼有多大的改變呢？

fangction* gen(){
  var url = 'user/get/info';
  var data = yield $.get({url:url});
  console.log(data.userName);
}

你不需要擔心遠程接口的返回時機，完全按照同步的方式寫代碼就行。

但是也有缺點，Generator函數把一步操作做的很簡潔，但對流程的管理卻不方便，

上面的例子如何執行？

var g = gen();
g.next();
g.next();

next 方法的作用是分階段執行 Generator 函數。每次調用 next 方法，會返回一個對象，

表示當前階段的信息（ value 屬性和 done 屬性）。value 屬性是 yield 語句后面表達式的值，表示當前階段的值；

done 屬性是一個布爾值，表示 Generator 函數是否執行完畢，即是否還有下一個階段。

你需要執行兩次.next方法，來將你的Generator函數執行完畢。

關于如何自動化異步任務的流程管理，就需要co，thunk，async的幫助了

到此，相信大家對“什么是JS Generator 函數以及怎么用JS Generator 函數”有了更深的了解，不妨來實際操作一番吧！這里是創新互聯成都網站設計公司網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

新聞標題：什么是JSGenerator函數以及怎么用JSGenerator函數-創新互聯
當前鏈接：http://vcdvsql.cn/article14/ccicde.html

成都網站建設公司_創新互聯，為您提供營銷型網站建設、網頁設計公司、App設計、建站公司、Google、企業建站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯