卡卡網(wǎng)

JavaScript 同步回調(diào)和異步回調(diào)之間的主要區(qū)別在于同步回調(diào)立即執(zhí)行，而異步回調(diào)的執(zhí)行推遲到稍后的時(shí)間點(diǎn)。在本文中，將通過示例來分析學(xué)習(xí)同步回調(diào)和異步回調(diào)。

同步回調(diào)

回調(diào)函數(shù)在主函數(shù)中作為參數(shù)傳遞，這些回調(diào)稍后在主函數(shù)中調(diào)用：

function CallBackTeaser(callback, param){
  console.log(`Calling the callback function`);
  callback(param);
  console.log(`callback function completed execution`);    
}
function consoleMyDetails(person){
  if(person){
    console.log(`Hi, my name is ${person.name}, i am ${person.job} & super exited about ${person.hobby}`);
  }
}
CallBackTeaser(consoleMyDetails, {'name': 'Praveen',
  'job':'Developer',
  'hobby':'learning new technologies.'
});

輸出

Calling the callback function
Hi, my name is Praveen, i am Developer & super exited about learning new technologies.
callback function completed execution

在上面的代碼中，consoleMyDetails 是一個(gè)回調(diào)方法——因?yàn)樗鳛閰?shù)傳遞給 CallBackTeaser 方法，并且是從 Teaser 方法內(nèi)部調(diào)用的。

這個(gè)例子是同步執(zhí)行回調(diào)函數(shù)的。

異步回調(diào)

回調(diào)也可以異步執(zhí)行，這意味著回調(diào)被放入任務(wù)隊(duì)列以首先完成當(dāng)前正在執(zhí)行的任務(wù)，然后一旦執(zhí)行堆棧為空，事件循環(huán)將選擇等待執(zhí)行的任務(wù)。

代碼示例：

function CallBackTeaser(callback, param){
  console.log(`Calling the callback function`);
  setTimeout(()=>{callback(param)}, 0); //異步調(diào)用函數(shù), 第一個(gè)參數(shù)傳遞回調(diào)函數(shù)
  console.log(`callback function completed execution`);
}
function consoleMyDetails(person){
  if(person){
    console.log(`Hi, my name is ${person.name}, i am ${person.job} & super exited about ${person.hobby}`);
  }
}
CallBackTeaser(consoleMyDetails, {'name': 'Praveen',
  'job':'Developer',
  'hobby':'learning new technologies.'
});  

輸出

Calling the callback function
callback function completed execution
Hi, my name is Praveen, i am Developer & super exited about learning new technologies.

在異步版本中，CallBackTeaser 使用 setTimeout 函數(shù)注冊一個(gè)回調(diào)以異步調(diào)用。

注意，consoleMyDetails 的輸出是最后打印出來，這是因?yàn)檫@個(gè)回調(diào)的異步執(zhí)行，延遲了它的執(zhí)行到當(dāng)前正在執(zhí)行的任務(wù)完成。

結(jié)論

上述兩個(gè)示例，可以看到輸出的差異——要記住的是：

• 這兩個(gè)示例都使用回調(diào)。
• 第一個(gè)同步調(diào)用回調(diào)，而第二個(gè)異步使用它。

我希望，這將幫助你更好地理解回調(diào)以及同步和異步使用它們的上下文。

相關(guān)文章

• JavaScript回調(diào)函數(shù)：同步回調(diào)與異步回調(diào)
• 什么是JavaScript回調(diào)函數(shù)以及如何使用它們
• 5示例分析了解JavaScript回調(diào)函數(shù)(callback function)

• [實(shí)例] JavaScript 常用函數(shù)調(diào)用方式：函數(shù)調(diào)用 vs 方法調(diào)用
• JavaScript函數(shù)調(diào)用的三種方式與this的使用【示例】
• 【示例】講解JavaScript IIFE 與函數(shù)調(diào)用

標(biāo)簽: 回調(diào)函數(shù)  callback