Javascript异步编程的4种方法

最新推荐文章于 2023-07-16 12:13:17 发布

小张走江湖

最新推荐文章于 2023-07-16 12:13:17 发布

阅读量246

点赞数

分类专栏： javascript

1 篇文章 0 订阅

订阅专栏

一次只能完成一件任务。如果有多个任务，必须排队执行

（eg：浏览器无响应（假死），往往是因为某一段JavaScript代码长时间运行（如死循环），导致卡在这个地方，其它任务无法执行）

解决方案：将任务的执行模式分为两种：同步（Synchronous）和异步（Asynchronous）

同步模式：前一个任务结束后才执行后一个任务，程序的执行顺序和任务的排列顺序是一致的、同步的
异步模式：每个任务有一个或多个回掉函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务不必等前一个任务结束才能执行。所以程序的执行顺序和任务的排列顺序是不一致的、异步的

异步模式编程的4种方法：

异步编程最基本的方法

现有两个函数f1和f2，后者等待前者的执行结果

function f1(callback){

setTimeout(function(){

 //f1的任务代码
    console.log('f1')

    callback();

},1000)}function f2(){ console.log('f2')}//执行f1(f2)

采用这种方式把同步操作变成了异步操作，f1不会堵塞程序运行，相当于先执行程序的主要逻辑，将耗时的操作推迟执行。

优点：简单、容易理解和部署

缺点：各部分高度耦合，流程会很混乱，不利于代码阅读和维护，而且每个任务只能指定一个回调函数

2.事件监听

事件驱动模式。任务的执行不取决于代码的顺序，而取决于某个事件是否发生。

以f1和f2为例。首先为f1绑定一个事件

f1.on("done",f2);

当f1发生done时间，就执行f2. 然后改写f1

function f1(){
    setTimeout(function(){
        //f1的任务代码
        f1.trigger("done")
    })
}

f1.trigger("done")表示，执行完成后，立即触发done事件，从而开始执行f2.

优点：便于理解；可绑定多个事件，每个事件可指定多个回调函数；可以去耦合，有利于实现模块化；

缺点：整个程序都要变成事件驱动型，运行流程会变的不清晰。

3.发布/订阅

方法2中的 “事件” 可以理解成“信号”。

发布/订阅模式：又称观察者模式。假定存在一个“信号中心”，某个任务执行完成，就向信号中心“发布”（publish）一个信号，其它任务可以向订阅中心订阅（subscribe）这个信号，从而知道何时可以执行。

采用Ben Alman 的Tiny Pun/Sub 的实现方式

首先，f2向“信号中心”Jquery订阅 "done" 信号

Jquery.subscribe("done",f2)

f1如下：

function f1(){
    setTimeout(function(){
        //f1的任务代码
        Jquery.publish("done")
    })
}

Jquery.publishj("done")的意思是，f1执行完成后，向“信号中心”Jquery发布“done”信号，从而引发f2的执行

f2完成执行后，也可以取消订阅（unsubscribe）

Jquery.unsubscribe("done",f2)

优点：类似但胜于“事件监听”，因为可以通过查看“消息中心”，了解存在多少信号、每个信号的订阅者，从而监控程序的运行

4.Promises对象

Promises对象目的是为异步编程提供统一接口

Promise思想：每一个异步任务返回一个Promise对象，该对象有一个then方法，允许指定回调函数，如f1的回调函数f2可以写成：

f1().then(f2);

f1需改写如下：

function f1(){
    var dfd = $.Deferred();
    setTimeout(function(){
        //f1的任务代码
        dfd.resolve()
    },500)
    return dfd.promise;
}

优点：回调函数变成了链式写法，程序的流程可以看的很清楚，而且有一整套的配套方法，可以实现许多强大的功能，如：指定多个回调函数；指定发生错误时的回调函数

f1.then(f2).then(f3)
f1.then(f2).fail(f3)

另外：它具备前三种方法不具备的优点：如果一个任务已经完成，再添加回调函数，该回调函数会立即执行。所以不必担心是否错过了某个事件或信号。

关注