国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JS基礎——異步回調

tianhang / 496人閱讀

摘要：回調大多出現在請求，用于處理收到的請求結果?；卣{函數和異步一開始我被回調和異步有點搞暈了。異步編程的實現就我目前知道兩種回調函數和事件監聽，其實看了阮神的異步編程的文章和下面的評論之后得出的理解。為了不影響的執行，我們可以把寫成的回調函數。

前言

一個剛入前端的小菜，雖然以前看到過關于回調的文章，但是呢，理解起來有點費勁啊。當時的腦海里就一個概念。

回調：大多出現在Ajax請求，用于處理收到的請求結果。

嘿嘿，當時真的就是這一個想法啊。現在真的入這行，而且這個概念也非常重要，用的地方太多太多，是時候把它撿起來好好理解一番。

當然，本文適合菜鳥，因為我是以一個菜鳥的思維去理解的。

回調概念

理解一個新東西，很有必須去理解下它的概念，因為這是最簡潔明了，前人總結的。

A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.

中文意思：回調是一個函數被作為一個參數傳遞到另一個函數里，在那個函數執行完后再執行。
有點繞，好，咱們說大白話。就是 B函數被作為參數傳遞到A函數里，在A函數執行完后再執行B。

下面咱們看看代碼怎么實現回調。

function A(callback){
    console.log("I am A");
    callback();  //調用該函數
}

function B(){
   console.log("I am B");
}

A(B);

這應該是最最簡單的回調了，我想大家應該明白回調的釋義了吧。
當然，這么簡單的同步回調代碼是不會用的，現實中用都是相對比較復雜帶傳參。

回調函數和異步

一開始我被回調和異步有點搞暈了。還以為回調就一定是異步的呢。
其實不然，相信上面的A,B函數的例子我們已經明白，回調并不一定就是異步。他們自己并沒有直接關系。

下面我們可以理解下 同步回調和異步回調（同步異步我就不多帶帶講了，概念很簡單）。

同步回調

就是上面的A B函數例子，它們就是同步的回調。

異步回調

因為js是單線程的，但是有很多情況的執行步驟（ajax請求遠程數據，IO等）是非常耗時的，如果一直單線程的堵塞下去會導致程序的等待時間過長頁面失去響應，影響用戶體驗了。

如何去解決這個問題呢，我們可以這么想。耗時的我們都扔給異步去做，做好了再通知下我們做完了，我們拿到數據繼續往下走。

var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);   //第三個參數決定是否采用異步的方式
    xhr.send(data);
    xhr.onreadystatechange = function(){
        if(xhr.readystate === 4 && xhr.status === 200){
                ///xxxx
        }
    }

上面是一個代碼，瀏覽器在發起一個ajax請求，會單開一個線程去發起http請求，這樣的話就能把這個耗時的過程多帶帶去自己跑了，在這個線程的請求過程中，readystate 的值會有個變化的過程，每一次變化就觸發一次onreadystatechange 函數，進行判斷是否正確拿到返回結果。

異步編程的實現

就我目前知道兩種 回調函數 和 事件監聽 ，其實看了阮神的 異步編程的文章 和下面的評論之后得出的理解。下面咱們就看看這兩種異步編程的方式吧。

回調函數

假定有三個函數

f1()

f2()

f3()

但是，f1執行很耗時，而 f2需要在f1執行完之后執行。
為了不影響 f3的執行，我們可以把f2寫成f1的回調函數。

//最原始的寫法-同步寫法

f1(); //耗時很長，嚴重堵塞
f2(); 
f3(); //導致f3執行受到影響


//改進版-異步寫法
function f1(callback){
　　setTimeout(function () {
　　　　// f1的任務代碼
　　　　callback();
　　}, 1000);
}

f1(f2); //

f3();

上面的寫法是利用 setTimeOut把f1的邏輯包括起來，實現javascript中的異步編程。這樣的話，f1異步了，不再堵塞f3的執行。
順道說下，js是單線程的，這里所謂的異步也是偽異步，并不是開了多線程的異步。它是什么原理呢，其實是任務棧，setTimeOut方法的原理是根據后面的定時時間，過了這個定時時間后，將f1加入任務棧，注意僅僅是加入任務棧，并不是放進去就執行，而是根據任務棧里的任務數量來確定的。

事件監聽

這里我直接用阮神的例子，通過事件觸發操作，就是類似于咱們點擊事件里的處理邏輯。

同樣 f1 , f2 兩個函數。

f1()

f2()

f1 我們給它加一個事件,事件觸發 f2 函數。

function f1(){
   setTimeOut(function(){
        f1.trigger("click");
    })
}

f1.on("click" , f2);

另外多說點，這上面的兩種方式都是 js 中的偽異步，而 ajax 的異步是底層多線程函數異步。

寫在最后

由于時間問題，后續的理解會再補上，再理理思路。另外如果有錯誤，也請各位前輩給予指正，感激不盡。

參考文獻

http://blog.csdn.net/kobejaya...
http://www.ruanyifeng.com/blo...
https://segmentfault.com/a/11...
https://segmentfault.com/a/11...

感謝上面4篇文章的作者的辛勤付出，看完很有收獲。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91024.html

相關文章

  • 總結javascript基礎概念（二）：事件隊列循環

    摘要：而事件循環是主線程中執行棧里的代碼執行完畢之后，才開始執行的。由此產生的異步事件執行會作為任務隊列掛在當前循環的末尾執行。在下，觀察者基于監聽事件的完成情況在下基于多線程創建。 主要問題： 1、JS引擎是單線程，如何完成事件循環的？ 2、定時器函數為什么計時不準確？ 3、回調與異步,有什么聯系和不同？ 4、ES6的事件循環有什么變化？Node中呢？ 5、異步控制有什么難點？有什么解決方...

    zhkai 評論0 收藏0

  • 【筆記】 你不知道的JS讀書筆記——異步

    摘要：異步請求線程在在連接后是通過瀏覽器新開一個線程請求將檢測到狀態變更時，如果設置有回調函數，異步線程就產生狀態變更事件，將這個回調再放入事件循環隊列中。 基礎：瀏覽器 -- 多進程，每個tab頁獨立一個瀏覽器渲染進程（瀏覽器內核） 每個瀏覽器渲染進程是多線程的，主要包括：GUI渲染線程 JS引擎線程 也稱為JS內核，負責處理Javascript腳本程序。（例如V8引擎） JS引擎線程負...

    junnplus 評論0 收藏0

  • JS基礎——同步異步的區別

    摘要：只要指定過這些事件的回調函數，這些事件發生時就會進入任務隊列，等待主線程讀取。異步任務必須指定回調函數，當主線程開始執行異步任務，就是執行對應的回調函數。 javascript語言是一門單線程的語言，不像java語言，類繼承Thread再來個thread.start就可以開辟一個線程。所以，javascript就像一條流水線，僅僅是一條流水線而已，要么加工，要么包裝，不能同時進行多個任...

    ztyzz 評論0 收藏0

  • JS異步那些事 一 （基礎知識）

    摘要：異步那些事一基礎知識異步那些事二分布式事件異步那些事三異步那些事四異步那些事五異步腳本加載事件概念異步回調首先了講講中兩個方法和定義和用法方法用于在指定的毫秒數后調用函數或計算表達式。功能在事件循環的下一次循環中調用回調函數。 JS異步那些事 一 （基礎知識）JS異步那些事 二 （分布式事件）JS異步那些事 三 （Promise）JS異步那些事 四（HTML 5 Web Workers...

    李濤 評論0 收藏0

  • ES6-7

    摘要：的翻譯文檔由的維護很多人說，阮老師已經有一本關于的書了入門，覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發過程中，顯得越來越重要。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。 JavaScript Promise 迷你書（中文版） 超詳細介紹promise的gitbook，看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...

    mudiyouyou 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<