1、JS执行环境:单线程

  单线程:就是指一次只能完成一件任务。若有多个任务时,就必须排队,等前面一个任务完成之后,再执行后面一个任务

缺点:任务耗时很长,后面的任务需要等待,拖延整个程序的执行。例如常见的浏览器无响应假死现象

2、什么是同步和异步

为了解决页面响应慢的问题,js将任务的执行模式分为两种:同步和异步

同步模式:后一个任务需要等待前一个任务结束之后才能执行

异步模式:每个任务会有一个或多个回调函数,前一个任务结束之后,不是执行后一个任务,而是执行回调函数,后一个任务不用等前一个任务结束就执行,,程序的执行顺序与任务的排列顺序事不一致的。例如,Ajax操作

3、四种“异步模式”编程的方法

1)回调函数

  • 主要思想

  假设有两个函数f1和f2,后者等待前者执行完,如果f1是一个耗时的任务,可以考虑改写f1,把f2改写成f1的回调函数

   利用定时器的工作原理将f1放入事件队列中去执行,哪怕延时是0,也是如此,因此不堵塞程序运行。此处掌握定时器的工作原理。

  • 回调函数的优点:简单,容易理解和部署。
  • 缺点:不利于代码的阅读和维护,各部分之间高度耦合,每个任务只能指定一个回调函数
 function f1(callback){
//先将函数作为一个参数
setTimeout(function(){
//f1的任务代码
callback();
},1000);
}
//执行代码就变成下面这样:
f1(f2);     

2)事件监听

  • 主要思想

任务执行的顺序不是取决于代码的顺序,而是取决与某个事件是否发生

利用定时器的原理去把f1放入事件队列里,等全部执行完毕之后,才会执行事件队列里的方法

例如:为f1绑定一个事件。f1.on('done'  ,  f2)  ; 意思是当f1发生done事件,就执行f2

  • 优点:可以绑定多个事件,每个事件可以指定多个回调函数;可以去耦合,有利于实现模块化
  • 缺点:整个程序都要变成事件驱动型,运行流程不清
 function f1(){
setTimeout(function(){
//f1的任务代码
f1.trigger('done');//表示执行完成之后,立即触发done事件,开始执行f2
},1000);
}      

3)发布、订阅

  • 发布订阅模式,即观察者模式,实现异步的主要的思想:

存在一个信号中心,某个任务执行完成之后,就向信号中心发布一个信号,其他任务可以向信号中心“订阅”这个信号,从而知道自己什么时候自己可以执行。下面主要采用Ben Alman的Tiny Pub/Sub ,jquery的一个插件。首先f2向“信号中心”jQuery订阅“done”信号,“JQuery.subscribe("done",f2);”。之后,f1进行如下代码改写。

f2完成执行后,也可以取消订阅(unsubscribe):“jQuery.unsubscribe("done", f2);”

  • 优点:可以通过查看“消息中心”,了解存在多少信号、每个信号有多少订阅者,从而监控程序的运行
 function  f1(){
setTimeout(function(){
//f1的任务代码
JQuery.publish("done");//表示f1执行完成后,向"信号中心"jQuery发布"done"信号,从而引发f2的执行。
  },1000);  }

4) Promises实现异步请求   

     对于promise的详细内容 ,请参考

  • Promise实现异步的主要的思想:

   每一个异步任务返回一个Promise对象,该对象有一个then方法,允许指定回调函数

  • 优点 :如果一个任务已经完成,再添加回调函数,该回调函数会立即执行。

所以,你不用担心是否错过了某个事件或信号。

  • 缺点:就是编写和理解,都相对比较难。

代码实现:

   var asynByPromise = (function() {
var promise = Promise.resolve({
then : function( callback ) {
callback();
}
});
return function( callback ) {
promise.then(function(){
callback();
})
};
})();
asynByPromise(function() {
console.log(1);
});
console.log(2);                         

参考链接:

Asynchronous JS: Callbacks, Listeners, Control Flow Libs and Promises

http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html

JS实现异步的几种方式的更多相关文章

  1. js处理异步的几种方式

    Javascript语言的执行环境是"单线程"(single thread,就是指一次只能完成一件任务.如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推) ...

  2. 原生javascript实现异步的7种方式

    1.$(document).ready 点评: 需要引用jquery :兼容所有浏览器. 2.标签的async=”async”属性 async的定义和用法(是HTML5的属性) async 属性规定一 ...

  3. js 函数定义三种方式

    <p>Js 函数定义的三种方式:</p> <br> <p>方式一:function</p> <script type="te ...

  4. 使用Webpack加速Vue.js应用的4种方式

    Webpack是开发Vue.js单页应用程序的重要工具. 通过管理复杂的构建步骤,你可以更轻松地开发工作流程,并优化应用程序的大小和性能. 其中介绍下面四种方式: 单个文件组件 优化Vue构建 浏览器 ...

  5. js创建对象的三种方式和js工厂模式创建对象

    文章地址: https://www.cnblogs.com/sandraryan/ 创建对象 创建对象的三种方式 构造函数 ,是一种特殊的方法.主要用来在创建对象时初始化对象 1. 调用系统的构造函数 ...

  6. js创建对象的几种方式

    /** * 顺便重温一下对象的创建方式 * 代码简单说明问题就好 * 概念性的东西这里就不提了,只加上自己简单理解 */ /** * 工厂模式,就是将手动的创建细节封装在一个方法里, * return ...

  7. 第184天:js创建对象的几种方式总结

    面向对象编程(OOP)的特点: 抽象:抓住核心问题 封装:只能通过对象来访问方法 继承:从已有的对象下继承出新的对象 多态:多对象的不同形态 一.创建对象的几种方式 javascript 创建对象简单 ...

  8. js创建对象的三种方式

    <script> //创建对象的三种方式 // 1.利用对象字面量(传说中的大括号)创建对象 var obj1 = { uname: 'ash', age: 18, sex: " ...

  9. 前端js文件合并三种方式

    最近在思考前端js文件该如何合并,当然不包括不能合并文件,而是我们能合并的文件,想了想应该也只有三种方式. 三个方式如下: 1. 一个大文件,所有js合并成一个大文件,所有页面都引用它. 2. 各个页 ...

随机推荐

  1. SpringCloud学习成长之路二 服务客户端(rest+ribbon)

    在微服务架构中,业务都会被拆分成一个独立的服务,服务与服务的通讯是基于http restful的. Spring cloud有两种服务调用方式,一种是ribbon+restTemplate,另一种是f ...

  2. 分析spring事务@Transactional注解在同一个类中的方法之间调用不生效的原因及解决方案

    问题: 在Spring管理的项目中,方法A使用了Transactional注解,试图实现事务性.但当同一个class中的方法B调用方法A时,会发现方法A中的异常不再导致回滚,也即事务失效了. 当这个方 ...

  3. Delphi下Treeview控件基于节点编号的访问1

    有时我们需要保存和重建treeview控件,本文提供一种方法,通过以树结构节点的编号访问树结构,该控件主要提供的方法如下:      function GetGlobeNumCode(inNode:T ...

  4. Swift学习 (四)

    5.枚举与结构体: 不必给枚举成员提供一个值.如果我们想要为枚举成员提供一个值(raw value),我们可以用字符串,字符,整型或浮点数类型. 1 2 3 4 5 6 7 enum CompassP ...

  5. Win10使用mysqldump导出csv文件及期间遇到的问题

    作为测试,我们这里使用了名为testdb的数据库中的名为test_table的表,首先我们使用如下SQL来查看其中有何数据: select * from testdb.test_table 数据如下: ...

  6. swift 屏幕的翻转 + 状态栏(statusBar)的隐藏

    1.状态栏的隐藏 这个问题是基于 UIApplication.shared.isStatusBarHidden = true; 调用居然是无效的…… 现在写下自己的代码,用来备忘吧…… 1.首先需要复 ...

  7. 《Fluid Engine Development》 学习笔记2-基础

    断断续续花了一个月,终于把这本书的一二两章啃了下来,理解流体模拟的理论似乎不难,无论是<Fluid Simulation for Computer Graphics>还是<计算流体力 ...

  8. 性能优化-Bitmap内存管理及优化

    Bitmap作为重要Android应用之一,在很多时候如果应用不当,很容易造成内存溢出,那么这篇文章的目的就在于探讨Bitmap的有效运用及其优化 缓存介绍 当多次发送请求的时候,请求同一内容,为了使 ...

  9. go项目部署到linxu

    环境: 在mac上编译, 编译后上传到linux, 然后运行代码 go项目打包 一.直接部署到linux 1. 在mac上, 进入到项目目录, 执行以下命令, 进行编译: CGO_ENABLED=0 ...

  10. Azure经典虚拟机(Windows)如何监测单个磁盘的使用空间

    Azure云平台创建经典虚拟机(Windows)后,发现仪表板的监测项下默认是没有针对磁盘空间进行检测的指标的 本地机器安装Windows Azure Powershell模块,并通过如下命令登陆并查 ...