[示例]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 的输出是最后打印出来，这是因为这个回调的异步执行，延迟了它的执行到当前正在执行的任务完成。
结论
上述两个示例，可以看到输出的差异——要记住的是：
- 这两个示例都使用回调。
- 第一个同步调用回调，而第二个异步使用它。
我希望，这将帮助你更好地理解回调以及同步和异步使用它们的上下文。
相关文章
- 站长推荐
