|
|
|
|
|
|
[示例]JavaScript同步回調轉為異步回調
作者:admin 時間:2022-6-27 16:43:51 瀏覽:JavaScript 同步回調和異步回調之間的主要區別在于同步回調立即執行，而異步回調的執行推遲到稍后的時間點。在本文中，將通過示例來分析學習同步回調和異步回調。
同步回調
回調函數在主函數中作為參數傳遞，這些回調稍后在主函數中調用：
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 是一個回調方法——因為它作為參數傳遞給 CallBackTeaser 方法，并且是從 Teaser 方法內部調用的。
這個例子是同步執行回調函數的。
異步回調
回調也可以異步執行，這意味著回調被放入任務隊列以首先完成當前正在執行的任務，然后一旦執行堆棧為空，事件循環將選擇等待執行的任務。
代碼示例：
function CallBackTeaser(callback, param){
console.log(`Calling the callback function`);
setTimeout(()=>{callback(param)}, 0); //異步調用函數, 第一個參數傳遞回調函數
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 函數注冊一個回調以異步調用。
注意，consoleMyDetails 的輸出是最后打印出來，這是因為這個回調的異步執行，延遲了它的執行到當前正在執行的任務完成。
結論
上述兩個示例，可以看到輸出的差異——要記住的是：
- 這兩個示例都使用回調。
- 第一個同步調用回調，而第二個異步使用它。
我希望，這將幫助你更好地理解回調以及同步和異步使用它們的上下文。
相關文章
