前端开发中如何实现异步编程

来源:互联网 发布:qq头像源码 编辑:程序博客网 时间:2024/05/19 22:26

异步编程其实很常见,特别是在出线Node.js之后,异步编程更是让很多开发者受益。那么回到最初的地方,传统的前端开发中如何实现异步编程呢?下面列举了js实现异步编程的四种方式。

方法一:使用回调函数

比如有两个方法f1()f2()f1()方法耗时较多,这时可以使用回调函数实现异步:

function f1(callback){

    setTimeout(function () {

        // f1的任务代码

        callback();

    }, 1000);

}

f1(f2);

因为在js中存在函数提升的规则,所以callback()方法会先于f1的任务代码执行。也可以使用其他方法,总之回调函数的使用模式就是将耗时操作推迟执行,从而不会阻塞整个程序的执行


方法二:事件监听

可以定义一个事件,并为这个事件设定处理函数。这样只有当这个时间发生的情况下,对应的处理函数才会被执行。

比如最传统的addEventListener()方法,通过侦听某个元素的事件,执行之间的响应方法,就是事件侦听的异步模式。实现这种模式的jquery代码如下:

f1.on('done', f2);

function f1(){

    setTimeout(function () {

        // f1的任务代码

        f1.trigger('done');

    }, 1000);

}

首先侦听f1()的done事件,监听到该事件就出发f2()方法。这样在f1()中执行触发done方法,即可完成f1()和f2()的异步执行。


方法三:事件的发布/订阅

这个模式在NodeJS以及其他JS框架中都有实现,是一个非常常用的异步编程方式。具体的原理及实现方法可以参考我之前的博客:http://blog.csdn.net/fareise/article/details/52198877《 Node中EventEmitter以及如何实现JavaScript中的订阅/发布模式》,里面有比较详细的解析。


方法四:Promise模式

ES6中提供了原生的Promise对象,这个模式最开始只是一个构想,后来由一些框架库实现。Promise对象代表了未来才会知道结果的事件。

Promise的基本思路就是,将需要异步执行的事件储存起来,然后根据异步事件之行后的结果状态执行下一步的操作。具体的Promise对象的原理和ES6中的使用方法将在下一篇文章中更加深入的进行介绍。

2 0
原创粉丝点击