JS异步编程

摘要:
现在我们知道,单线程JS将使用异步处理来避免长时间等待。回调函数事件侦听发布/订阅模式承诺。后来,在ES6中引入了Generator功能;在ES7中,async/await将异步编程带入了一个新阶段。

1.1 什么是异步

异步(async)是相对于同步(sync)而言的,很好理解。

同步就是一件事一件事的执行。只有前一个任务执行完毕,才能执行后一个任务。而异步是不用等待前一个任务执行完成也能够执行

比如:

setTimeout(function(){
    console.log(1);
}, 1000);
console.log(2);
// 2 1

setTimeout就是一个异步任务,当JS引擎顺序执行到setTimeout的时候发现他是个异步任务,则会把这个任务挂起,继续执行后面的代码。直到1000ms后,回调函数才会执行,这就是异步,在执行到setTimeout的时候,JS并不会傻呵呵的等着1000ms执行cbFn回调函数,而是继续执行了后面的代码。所以执行结果是:2 1

1.2 为啥要在JS中使用异步

由于javascript是单线程的,只能在JS引擎的主线程上运行的,所以js代码只能一行一行的执行,不能在同一时间执行多个js代码任务,这就导致如果有一段耗时较长的计算,或者是一个ajax请求等IO操作,如果没有异步的存在,就会出现用户长时间等待,并且由于当前任务还未完成,所以这时候所有的其他操作都会无响应。

1.3 那为啥JS不设计成多线程的

这主要跟javascript的历史有关,js最开始只是为了处理一些表单验证和DOM操作而被创造出来的,所以主要为了语言的轻量和简单采用了单线程的模式。多线程模型相比单线程要复杂很多,比如多线程需要处理线程间资源的共享问题,还要解决状态同步等问题。

如果JS是多线程的话,当你要执行往div中插入一个DOM的操作的同时,另一个线程执行了删除这个div的操作,这个时候就会出现很多问题,我们还需要为此增加锁机制等。

好,那么现在我们知道了单线程的JS为了不出现长时间等待的状况,会使用异步来处理。比如当执行一个ajax操作的时候,当js发出请求后,不会傻了吧唧的在那里等着服务器数据返回,而是去继续执行后面的任务,等到服务器数据返回以后再通知js引擎去处理。

那么常见的异步模式有哪些呢?

  • 回调函数
  • 事件监听
  • 发布/订阅模式(又称观察者模式)
  • promise

后来ES6中,引入了Generator函数;ES7中,async/await更是将异步编程带入了一个全新的阶段。

这些异步模式我们会在后面详细来说,这里我们有个概念就好。

1.4 JS如何实现异步

具体JS是如何实现异步操作的呢?

答案就是JS的事件循环机制(Event Loop)

具体来说:

当JS解析执行时,会被引擎分为两类任务,同步任务(synchronous)异步任务(asynchronous)

对于同步任务来说,会被推到执行栈按顺序去执行这些任务。
对于异步任务来说,当其可以被执行时,会被放到一个任务队列(task queue)里等待JS引擎去执行。

当执行栈中的所有同步任务完成后,JS引擎才会去任务队列里查看是否有任务存在,并将任务放到执行栈中去执行,执行完了又会去任务队列里查看是否有已经可以执行的任务。这种循环检查的机制,就叫做事件循环(Event Loop)

对于任务队列,其实是有更细的分类。其被分为微任务(microtask)队列&宏任务(macrotask)队列

宏任务: setTimeout、setInterval等,会被放在宏任务(macrotask)队列。

微任务: Promise的then、Mutation Observer等,会被放在微任务(microtask)队列。

Event Loop的执行顺序是:

  1. 首先执行执行栈里的任务。
  2. 执行栈清空后,检查微任务(microtask)队列,将可执行的微任务全部执行。
  3. 取宏任务(macrotask)队列中的第一项执行。
  4. 回到第二步。

注意: 微任务队列每次全执行,宏任务队列每次只取一项执行。

我们举个例子:

复制代码
setTimeout(() => {
    console.log('我是第一个宏任务');
    Promise.resolve().then(() => {
        console.log('我是第一个宏任务里的第一个微任务');
    });
    Promise.resolve().then(() => {
        console.log('我是第一个宏任务里的第二个微任务');
    });
}, 0);
setTimeout(() => {
    console.log('我是第二个宏任务');
}, 0);
Promise.resolve().then(() => {
    console.log('我是第一个微任务');
});
console.log('执行同步任务');
复制代码

最后的执行结果是:

  • // 执行同步任务
  • // 我是第一个微任务
  • // 我是第一个宏任务
  • // 我是第一个宏任务里的第一个微任务
  • // 我是第一个宏任务里的第二个微任务
  • // 我是第二个宏任务

1.5 JS异步编程模式

这里我们已经知道了JS中异步的运行机制,我们翻回头来详细的了解一下常见的各种异步的编程模式。

  • 回调函数
  • 事件监听
  • 发布/订阅模式
  • Promise
  • Generator
  • async/await

1.5.1 回调函数

回调函数是异步操作最基本的方法。

比如:我有一个异步操作(asyncFn),和一个同步操作(normalFn)。

复制代码
function asyncFn() {
    setTimeout(() => {
        console.log('asyncFn');
    }, 0)
}
function normalFn() {
    console.log('normalFn');
}
asyncFn();
normalFn();
// normalFn
// asyncFn
复制代码

如果按照正常的JS处理机制来说,同步操作一定发生在异步之前。如果我想要将顺序改变,最简单的方式就是使用回调的方式处理。

复制代码
function asyncFn(callback) {
    setTimeout(() => {
        console.log('asyncFn');
        callback();
    }, 0)
}
function normalFn() {
    console.log('normalFn');
}
asyncFn(normalFn);
// asyncFn
// normalFn
复制代码

1.5.2 事件监听

另一种思路是采用事件驱动模式。这种思路是说异步任务的执行不取决于代码的顺序,而取决于某个事件是否发生。

比如一个我们注册一个按钮的点击事件或者注册一个自定义事件,然后通过点击或者trigger的方式触发这个事件。

1.5.3 发布/订阅模式(又称观察者模式)

这个重点讲下,发布/订阅模式像是事件监听模式的升级版。

在发布/订阅模式中,你可以想象存在一个消息中心的地方,你可以在那里“注册一条消息”,那么被注册的这条消息可以被感兴趣的若干人“订阅”,一旦未来这条“消息被发布”,则所有订阅了这条消息的人都会得到提醒。

这个就是发布/订阅模式的设计思路。接下来我们一点一点实现一个简单的发布/订阅模式。

首先我们先实现一个消息中心。

复制代码
// 先实现一个消息中心的构造函数,用来创建一个消息中心
function MessageCenter(){
    var _messages = {}; // 所有注册的消息都存在这里
    this.regist = function(){}; // 用来注册消息的方法
    this.subscribe = function(){};  // 用来订阅消息的方法
    this.fire = function(){};   // 用来发布消息的方法
}
复制代码

这里一个消息中心的雏形就创建好了,接下来我们只要完善下regist,subscribe和fire这三个方法就好了。

复制代码
function MessageCenter(){
    var _messages = {};
    // 对于regist方法,它只负责注册消息,就只接收一个注册消息的类型(标识)参数就好了。
    this.regist = function(msgType){
        // 判断是否重复注册
        if(typeof _messages[msgType] === 'undefined'){
            _messages[msgType] = [];    // 数组中会存放订阅者
        }else{
            console.log('这个消息已经注册过了');
        }
    }
    // 对于subscribe方法,需要订阅者和已经注册了的消息进行绑定
    // 由于订阅者得到消息后需要处理消息,所以他是一个个的函数
    this.subscribe = function(msgType, subFn){
        // 判断是否有这个消息
        if(typeof _messages[msgType] !== 'undefined'){
            _messages[msgType].push(subFn);
        }else{
            console.log('这个消息还没注册过,无法订阅')
        }
    }
    // 最后我们实现下fire这个方法,就是去发布某条消息,并通知订阅这条消息的所有订阅者函数
    this.fire = function(msgType, args){    
        // msgType是消息类型或者说是消息标识,而args可以设置这条消息的附加信息
        // 还是发布消息时,判断下有没有这条消息
        if(typeof _messages[msgType] === 'undefined') {
            console.log('没有这条消息,无法发布');
            return false;
        }
        var events = {
            type: msgType,
            args: args || {}
        };
        _messages[msgType].forEach(function(sub){
            sub(events);
        })
    }
}
复制代码

这样,一个简单的发布/订阅模式就完成了,当然这只是这种模式的其中一种简单实现,还有很多其他的实现方式。
就此我们就可以用他来处理一些异步操作了。

复制代码
var msgCenter = new MessageCenter();
msgCenter.regist('A');
msgCenter.subscribe('A', subscribeFn);
function subscribeFn(events) {
    console.log(events.type, events.args);
} 
// -----
setTimeout(function(){
    msgCenter.fire('A', 'fire msg');
}, 1000);
// A, fire msg
复制代码

1.5.4 Promise

promise是es6中新增的方法,主要用来解决多层嵌套回调函数而造成的“回调地狱”

var p = new Promise((resovled,reject) =>{
    console.log(1)
    setTimeout(() =>{
        console.log(2)
    }, 1000);
    resovled()
})
p.then(() =>{
    console.log(3)
}).catch(() =>{
    console.log(4)
})
//执行顺序:1  3   2

免责声明:文章转载自《JS异步编程》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇SQL Server数据导出Excel【WPF】1、 基本控件的简介下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

自制一个H5图片拖拽、裁剪插件(原生JS)

前言 如今的H5运营活动中,有很多都是让用户拍照或者上传图片,然后对照片加滤镜、加贴纸、评颜值之类的。尤其是一些拍照软件公司的运营活动几乎全部都是这样的。 博主也做过不少,为了省事就封装了一个简单的图片拖拽、裁剪的插件。其实网上也有很多类似的插件,只不过有的功能冗余体积大,有的甚至还依赖jquery。索性自己搞一个轻量的,只是不支持缩放功能。 DEMO(手...

js禁止微信浏览器下拉显示黑底查看网址,不影响内部Scroll

开发项目跑在微信浏览器经常会遇到一个问题,微信浏览器下拉的时候会出现自带的黑色底色(显示网址)如下图: 网上好多js禁止操作的做法禁止了内部Scroll,导致页面不能滚动,上拉加载失效,例如这种做法: $(‘body’).on(‘touchmove’, function (event) {event.preventDefault();}); or doc...

JS最新技术ES6,结合Vue全局注册,实现Axios封装配置插件!

接下来,带来js全新技术ES6,结合Vue install全局组件实现Axios封装,以代码形式讲解。 1、请求封装 //file:src/api/http/http.js import axios from 'axios' axios.create(); axios.interceptors.request.use((config)=>{ //...

原生js实现ajax 发送post请求/原生JS封装Ajax插件(同域、jsonp跨域)

原生js实现ajax发送post请求 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 varpostData = { "name1": "value1", "name2": "value2"}; postData = (functio...

js Jquery字符UrlEncode 编码 C#(asp.net)解码 Server HttpUtility 区别 cookies存中文

一、Js asp.net 交互Url编码解码 C#(asp.net)编码:HttpUtility.UrlEncode(url) Jquery解码:decodeURIComponent(url); Jquery编码:encodeURIComponent(url); C#(asp.net)解码:HttpUtility.UrlDecode 二、asp.net(S...

微信公众号--JS-SDK

JS-SDK 微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。 JS-SDK使用步骤 l  步骤一:绑定域名 先登录微信公众平台进...