技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

[示例]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 的输出是最后打印出来,这是因为这个回调的异步执行,延迟了它的执行到当前正在执行的任务完成。

结论

上述两个示例,可以看到输出的差异——要记住的是:

  • 这两个示例都使用回调。
  • 第一个同步调用回调,而第二个异步使用它。

我希望,这将帮助你更好地理解回调以及同步和异步使用它们的上下文。

相关文章

标签: 回调函数  callback  
x
x
  • 站长推荐