快捷導(dǎo)航

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

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

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

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

基本理解一個(gè)概念

回調(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.

實(shí)例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);//模仿耗時(shí)操作
}
//調(diào)用主函數(shù)，將函數(shù)B傳進(jìn)去
A(B);

輸出結(jié)果：

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

實(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é)果

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

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

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

結(jié)語(yǔ)

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

常見(jiàn)的：

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

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

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

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

您可能感興趣的文章: