成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

JS基礎(chǔ)——異步回調(diào)

tianhang / 586人閱讀

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

前言

一個剛?cè)肭岸说男〔耍m然以前看到過關(guān)于回調(diào)的文章，但是呢，理解起來有點(diǎn)費(fèi)勁啊。當(dāng)時的腦海里就一個概念。

回調(diào)：大多出現(xiàn)在Ajax請求，用于處理收到的請求結(jié)果。

嘿嘿，當(dāng)時真的就是這一個想法啊?，F(xiàn)在真的入這行，而且這個概念也非常重要，用的地方太多太多，是時候把它撿起來好好理解一番。

當(dāng)然，本文適合菜鳥，因?yàn)槲沂且砸粋€菜鳥的思維去理解的。

回調(diào)概念

理解一個新東西，很有必須去理解下它的概念，因?yàn)檫@是最簡潔明了，前人總結(jié)的。

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

中文意思：回調(diào)是一個函數(shù)被作為一個參數(shù)傳遞到另一個函數(shù)里，在那個函數(shù)執(zhí)行完后再執(zhí)行。
有點(diǎn)繞，好，咱們說大白話。就是 B函數(shù)被作為參數(shù)傳遞到A函數(shù)里，在A函數(shù)執(zhí)行完后再執(zhí)行B。

下面咱們看看代碼怎么實(shí)現(xiàn)回調(diào)。

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

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

A(B);

這應(yīng)該是最最簡單的回調(diào)了，我想大家應(yīng)該明白回調(diào)的釋義了吧。
當(dāng)然，這么簡單的同步回調(diào)代碼是不會用的，現(xiàn)實(shí)中用都是相對比較復(fù)雜帶傳參。

回調(diào)函數(shù)和異步

一開始我被回調(diào)和異步有點(diǎn)搞暈了。還以為回調(diào)就一定是異步的呢。
其實(shí)不然，相信上面的A,B函數(shù)的例子我們已經(jīng)明白，回調(diào)并不一定就是異步。他們自己并沒有直接關(guān)系。

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

同步回調(diào)

就是上面的A B函數(shù)例子，它們就是同步的回調(diào)。

異步回調(diào)

因?yàn)閖s是單線程的，但是有很多情況的執(zhí)行步驟（ajax請求遠(yuǎn)程數(shù)據(jù)，IO等）是非常耗時的，如果一直單線程的堵塞下去會導(dǎo)致程序的等待時間過長頁面失去響應(yīng)，影響用戶體驗(yàn)了。

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

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

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

異步編程的實(shí)現(xiàn)

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

回調(diào)函數(shù)

假定有三個函數(shù)

f1()

f2()

f3()

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

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

f1(); //耗時很長，嚴(yán)重堵塞
f2(); 
f3(); //導(dǎo)致f3執(zhí)行受到影響


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

f1(f2); //

f3();

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

事件監(jiān)聽

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

同樣 f1 , f2 兩個函數(shù)。

f1()

f2()

f1 我們給它加一個事件,事件觸發(fā) f2 函數(shù)。

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

f1.on("click" , f2);

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

寫在最后

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

參考文獻(xiàn)

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/91024.html

相關(guān)文章

  • 總結(jié)javascript基礎(chǔ)概念（二）：事件隊(duì)列循環(huán)

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

    zhkai 評論0 收藏0

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

    摘要：異步請求線程在在連接后是通過瀏覽器新開一個線程請求將檢測到狀態(tài)變更時，如果設(shè)置有回調(diào)函數(shù)，異步線程就產(chǎn)生狀態(tài)變更事件，將這個回調(diào)再放入事件循環(huán)隊(duì)列中。 基礎(chǔ)：瀏覽器 -- 多進(jìn)程，每個tab頁獨(dú)立一個瀏覽器渲染進(jìn)程（瀏覽器內(nèi)核） 每個瀏覽器渲染進(jìn)程是多線程的，主要包括：GUI渲染線程 JS引擎線程 也稱為JS內(nèi)核，負(fù)責(zé)處理Javascript腳本程序。（例如V8引擎） JS引擎線程負(fù)...

    junnplus 評論0 收藏0

  • JS基礎(chǔ)——同步異步的區(qū)別

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

    ztyzz 評論0 收藏0

  • JS異步那些事 一 （基礎(chǔ)知識）

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

    李濤 評論0 收藏0

  • ES6-7

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

    mudiyouyou 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<