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

异步编程其实很常见,特别是在出线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中的使用方法将在下一篇文章中更加深入的进行介绍。

  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值