浅谈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 相关文章推荐
用JavaScript实现UrlEncode和UrlDecode的脚本代码
Jul 23 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
Jan 20 Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 Javascript
js实现照片墙功能实例
Feb 05 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
很实用的js选项卡切换效果
Aug 12 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
Aug 31 Javascript
Angular的MVC和作用域
Dec 26 Javascript
js实现下拉框效果(select)
Mar 28 Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
vue项目强制清除页面缓存的例子
Nov 06 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
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
实用函数2
2007/11/08 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
学习php设计模式 php实现门面模式(Facade)
2015/12/07 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
2007/02/23 Javascript
WordPress JQuery处理沙发头像
2009/06/22 Javascript
javascript下高性能字符串连接StringBuffer类
2010/08/16 Javascript
JS维吉尼亚密码算法实现代码
2010/11/09 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
js鼠标经过tab选项卡时实现切换延迟
2017/03/24 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
详解vue-cli3使用
2018/08/14 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
jQuery弹框插件使用方法详解
2020/05/26 jQuery
js实现Element中input组件的部分功能并封装成组件(实例代码)
2021/03/02 Javascript
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
打开电脑上的QQ的python代码
2013/02/10 Python
python3用PIL把图片转换为RGB图片的实例
2019/07/04 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
工作经常出错的检讨书
2014/09/13 职场文书
学校领导班子对照检查材料
2014/09/24 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
2014年爱国卫生工作总结
2014/11/22 职场文书
2014年幼儿园园长工作总结
2014/12/17 职场文书
幼儿园家长工作总结2015
2015/04/25 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书