JS回調(diào)函數(shù) callback的理解與使用案例分析

更新時間：2019年09月09日 10:39:23 作者：HyperDai

這篇文章主要介紹了JS回調(diào)函數(shù) callback的理解與使用,結(jié)合具體案例形式分析了javascript回調(diào)函數(shù)的功能、原理、用法及相關(guān)操作注意事項,需要的朋友可以參考下

本文實例講述了JS回調(diào)函數(shù) callback的理解與使用。分享給大家供大家參考，具體如下：

基本理解一個概念

回調(diào)函數(shù)回頭再調(diào)用函數(shù)，等主干事情干完了，再回頭干分支上的事情。

官方定義

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

實例1

//定義主函數(shù)，回調(diào)函數(shù)作為參數(shù)
function A(callback) {
  callback();
  console.log('我是主函數(shù)');
}
//定義回調(diào)函數(shù)
function B(){
  setTimeout("console.log('我是回調(diào)函數(shù)')", 3000);//模仿耗時操作
}
//調(diào)用主函數(shù)，將函數(shù)B傳進去
A(B);

輸出結(jié)果：

我是主函數(shù)
我是回調(diào)函數(shù)

實例2

function a() {
  console.log("執(zhí)行a函數(shù)");
  setTimeout(function(){
      console.log("執(zhí)行a函數(shù)的延遲函數(shù)");
  },1000);
  function b() {
    console.log("執(zhí)行函數(shù)b");
  );
  a();
  b();
};

輸出結(jié)果

以上代碼會先執(zhí)行函數(shù)a,而且不會等到a中的延遲函數(shù)執(zhí)行完才執(zhí)行函數(shù)b, 在延遲函數(shù)被觸發(fā)的過程中就執(zhí)行了函數(shù)b,當(dāng)js引擎的event 隊列空閑時才會去執(zhí)行隊列里等待的setTimeout的回調(diào)函數(shù)，這就是一個異步的例子

調(diào)用 setTimeout 函數(shù)會在一個時間段過去后在隊列中添加一個消息。這個時間段作為函數(shù)的第二個參數(shù)被傳入。如果隊列中沒有其它消息，消息會被馬上處理。但是，如果有其它消息，setTimeout 消息必須等待其它消息處理完。因此第二個參數(shù)僅僅表示最少的時間而非確切的時間

所以即使，時間設(shè)置為0，也是會照樣先執(zhí)行函數(shù)b

結(jié)語

回調(diào)函數(shù)廣泛運用在同步（sync）和異步（async）

常見的：

還需要深挖：js單線程和js異步

瀏覽器常駐三大線程: js引擎線程，GUI渲染線程，瀏覽器事件觸發(fā)線程

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: