浅谈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 相关文章推荐
JS字符串函数扩展代码
Sep 13 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
JavaScript日期时间与时间戳的转换函数分享
Jan 31 Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
JavaScript实现经典排序算法之冒泡排序
Dec 28 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
JS实现动态修改table及合并单元格的方法示例
Feb 20 Javascript
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
谈谈IntersectionObserver懒加载的具体使用
Oct 15 Javascript
jQuery轮播图功能制作方法详解
Dec 03 jQuery
vue组件中实现嵌套子组件案例
Aug 31 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
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
使用PHP求两个文件的相对路径
2013/06/20 PHP
PHP内置的Math函数效率测试
2014/12/01 PHP
分享常见的几种页面静态化的方法
2015/01/08 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
2015/12/03 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
Angularjs 滚动加载更多数据
2016/03/17 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
JavaScript如何获取一个元素的样式信息
2019/07/29 Javascript
js实现简单掷骰子小游戏
2019/10/24 Javascript
[46:59]完美世界DOTA2联赛PWL S2 GXR vs Ink 第二场 11.19
2020/11/20 DOTA
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
python矩阵的转置和逆转实例
2018/12/12 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程
2020/05/07 Python
没编程基础可以学python吗
2020/06/17 Python
keras:model.compile损失函数的用法
2020/07/01 Python
Python如何将模块打包并发布
2020/08/30 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
适合各种场合的美食礼品:Harry & David
2016/08/03 全球购物
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
Reformation官网:美国女装品牌
2018/09/14 全球购物
十八届三中全会个人学习材料
2014/02/13 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
Python中异常处理用法
2021/11/27 Python