浅谈js的异步执行


Posted in Javascript onOctober 18, 2016

1.Javascript语言的执行环境是”单线程”(single thread):

优点:实现起来比较简单,执行环境相对单纯;

缺点:只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行。常见的浏览器无响应(假死),往往就是因为某一段Javascript代码长时间运行(比如死循环),导致整个页面卡在这个地方,其他任务无法执行。

为了解决这个问题,Javascript语言将任务的执行模式分成两种:同步(Synchronous)和异步(Asynchronous)。

2.”异步模式”编程的几种方法:

(1)回调函数:优点是简单、容易理解和部署,缺点是不利于代码的阅读和维护,各个部分之间高度耦合(Coupling),使得程序结构混乱、流程难以追踪(尤其是回调函数嵌套的情况),而且每个任务只能指定一个回调函数。

(2)采用事件驱动模式(事件监听):优点是比较容易理解,可以绑定多个事件,每个事件可以指定多个回调函数,而且可以”去耦合“(Decoupling),有利于实现模块化。缺点是整个程序都要变成事件驱动型,运行流程会变得很不清晰。

(3)观察者模式(发布\订阅模式):这种方法的性质与”事件监听”类似,但是明显优于后者。因为我们可以通过查看”消息中心”,了解存在多少信号、每个信号有多少订阅者,从而监控程序的运行。

3.异步操作的流程控制。

(1)串行执行:编写一个流程控制函数,让它来控制异步任务,一个任务完成以后,再执行另一个。

var items = [ 1, 2, 3, 4, 5, 6 ];
var results = [];
function series(item) {
 if(item) {
  async( item, function(result) {
   results.push(result);
   return series(items.shift());
  });
 } else {
  return final(results);
 }
}
series(items.shift());

函数series就是串行函数,它会依次执行异步任务,所有任务都完成后,才会执行final函数。items数组保存每一个异步任务的参数,results数组保存每一个异步任务的运行结果。

(2)并行执行:所有异步任务同时执行,等到全部完成以后,才执行final函数。

//forEach方法会同时发起6个异步任务,等到它们全部完成以后,才会执行final函数。
var items = [ 1, 2, 3, 4, 5, 6 ];
var results = [];

items.forEach(function(item) {
 async(item, function(result){
  results.push(result);
  if(results.length == items.length) {
   final(results);
  }
 })
});

并行执行的好处是效率较高,比起串行执行一次只能执行一个任务,较为节约时间。但是问题在于如果并行的任务较多,很容易耗尽系统资源,拖慢运行速度。因此有了第三种流程控制方式。

(3)并行与串行的结合:设置一个门槛,每次最多只能并行执行n个异步任务。这样就避免了过分占用系统资源。

//变量running记录当前正在运行的任务数,只要低于门槛值,就再启动一个新的任务
//如果等于0,就表示所有任务都执行完了,这时就执行final函数
//最多只能同时运行两个异步任务。
var items = [ 1, 2, 3, 4, 5, 6 ];
var results = [];
var running = 0;
var limit = 2;

function launcher() {
  while(running < limit && items.length > 0) {
    var item = items.shift();
    async(item, function(result) {
      results.push(result);
      running++;
      if(items.length > 0) {
        launcher();
      }
    });
    running--;
    if(running == 0) {
      final();
    }
  }
}

以上就是小编为大家带来的浅谈js的异步执行全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
分享十五个最佳jQuery 幻灯插件和教程
Mar 27 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 Javascript
jquery win 7透明弹出层效果的简单代码
Aug 06 Javascript
javascript实现日期按月份加减
May 15 Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 Javascript
七个不允许错过的jQuery小技巧
Dec 21 Javascript
bootstrap-treeview自定义双击事件实现方法
Jan 09 Javascript
AngularJS中的指令全面解析(必看)
May 20 Javascript
node.js中 stream使用教程
Aug 28 Javascript
关于Javascript中document.cookie的使用
Mar 08 Javascript
bootstrap轮播模板使用方法详解
Nov 17 Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 #Javascript
微信小程序 教程之模块化
Oct 17 #Javascript
微信小程序 教程之注册页面
Oct 17 #Javascript
微信小程序 教程之注册程序
Oct 17 #Javascript
微信小程序 教程之小程序配置
Oct 17 #Javascript
jQuery事件对象总结
Oct 17 #Javascript
微信小程序 MINA文件结构
Oct 17 #Javascript
You might like
PHPCMS的使用小结
2010/09/20 PHP
php preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
PHP中一个有趣的preg_replace函数详解
2018/08/15 PHP
jquery图片放大功能简单实现
2013/08/01 Javascript
Google官方支持的NodeJS访问API,提供后台登录授权
2014/07/29 NodeJs
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
被遗忘的javascript的slice() 方法
2015/04/20 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
jquery实现拖动效果
2016/08/10 Javascript
浅谈js中的三种继承方式及其优缺点
2016/08/10 Javascript
easyui form validate总是返回false的原因及解决方法
2016/11/07 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
python分布式环境下的限流器的示例
2017/10/26 Python
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
python监控进程脚本
2018/04/12 Python
python之pyqt5通过按钮改变Label的背景颜色方法
2019/06/13 Python
python双向链表原理与实现方法详解
2019/12/03 Python
Python使用正则实现计算字符串算式
2019/12/29 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
学习十八大精神心得体会
2013/12/31 职场文书
入学申请自荐信范文
2014/02/26 职场文书
学生个人自我鉴定
2014/03/26 职场文书
我的梦想演讲稿1000字
2014/08/21 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
小学思品教学反思
2016/02/20 职场文书
当你焦虑迷茫时,请读读这6句话
2019/07/24 职场文书