簡單理解JS回調函數(callback)


一、回調函數到底是什么?

  其實回調函數(沒有調用也會執行)就是一個參數,把這個參數傳到另一個函數里面,也就是主函數里面,當主函數里面的事情干完再回頭去執行當做參數傳進去的回調函數,回頭去調用,這就是回調的概念。

  舉一個別人舉過的例子:約會結束后你送你女朋友回家,離別時,你肯定會說:“到家了給我發條信息,我很擔心你。” 對不,然后你女朋友回家以后還真給你發了條信息。小伙子,你有戲了。其實這就是一個回調的過程。你留了個參數函數(要求女朋友給你發條信息)給你女朋友,然后你女朋友回家,回家的動作是主函數。她必須先回到家以后,主函數執行完了,再執行傳進去的函數,然后你就收到一條信息了。

  接下來我們用代碼更清晰的理解一下回調的概念:

<script>
    //定義主函數,回調函數作為參數
    function A(callback) {
        callback();
        console.log('我是主函數');
    }

    //定義回調函數
    function B() {
        setTimeout("console.log('我是回調函數')",2000);//即使此時時間設置為0,也會先輸出主函數
    }

    //調用主函數,將B傳進去
    A(B);
</script>

//輸出結果

  從以上代碼可以看出,我們先執行的回調函數callback(),但是輸出的時候卻是后輸出回調函數里面的內容,由此可以證實上面的說法,要等到主函數里面的事情干完再回頭去執行回調函數。

 

二、了解JS的執行機制

  

  • 先執行執行棧里面的同步任務
  • 異步任務(回調函數)放入任務隊列中
  • 同步任務結束,按次執行異步任務,異步任務進入執行棧開始執行

  我們都知道js是單線程的,這種設計模式給我們帶來了很多的方便之處,我們不需要考慮各個線程之間的通信,也不需要寫很多燒腦的代碼,也就是說js的引擎只能一件一件事的去完成和執行相關的操作,所以所有需要執行的事情都像排隊一樣,等待着被觸發和執行,可是如果這樣的話,如果在隊列中有一件事情需要花費很多的時間,那么后面的任務都將處於一種等待狀態,有時甚至會出現瀏覽器假死現象,例如其中有一件正在執行的一個任務是一個死循環,那么會導致后續其他的任務無法正常執行,所以js在同步機制的缺陷下設計出了異步模式

  在異步執行的模式下,每一個異步的任務都有其自己一個或着多個回調函數,這樣當前在執行的異步任務執行完之后,不會馬上執行事件隊列中的下一項任務,而是執行它的回調函數,而下一項任務也不會等當前這個回調函數執行完,因為它也不能確定當前的回調合適執行完畢,只要引它被觸發就會執行,

 

三、常見的回調函數 

  1、dom事件回調函數(如點擊按鈕事件的函數)

//click方法中是一個函數而不是一個變量
$("#btn").click(function() {
    alert("我是回調函數");
});  
//或者
function click() { 
    alert("我是回調函數");
}

  2、定時器回調函數(如上)

  3、ajax請求回調函數

  4、生命周期回調函數  

           如 onLoad、 start 、update、 lateUpdate、 onDestroy 、onEnable、 onDisable

    (有關生命周期回調函數可以查閱https://www.cnblogs.com/allyh/p/9502918.html)

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM