继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

javascript中常用的异步解决方案

big_person
关注TA
已关注
手记 12
粉丝 8
获赞 131
  • 异步编程和同步编程的区别
    同步编程:后一个任务等待前一个任务结束,然后再执行,程序的执行顺序与任务的排列顺序是一致的、同步的。
    异步编程:每一个任务有一个或多个回调函数(callback),前一个任务结束后,不是执行后一个任务,而是执行回调函数,后一个任务则是不等前一个
    任务结束就执行,所以程序的执行顺序与任务的排列顺序是不一致的、异步的。 异步解决方案之Ajax请求

    在浏览器端将数据发送给服务器端,而之后,不等这个请求完成,就会让出时间,去执行下面的代码。而等请求返回数据之后,再继续执行为请求所指定的回调方法。这个很常见。

    异步解决方案之回调函数
这三个函数可以看做是三个任务。
假设,f1最先执行,f2的执行要依赖于task1的运行结果,f3在任务队列里等待执行。
因为有了上面的假设,我们就可以将f2做为f1的回调函数,而f3自然执行即可。
// define functions
function f1(callback){
    console.log('f1')
    setTimeout(function(){
        console.log('f1 again')
        // some code
        callback();
    },1000);
}
function f2(){
    console.log('f2')
}
function f3(){
    console.log('f3')
}
// exec functions
f1(f2);
f3();
以上代码的执行结果:
f1
f3
f1 again
f2

回调函数方式,优点是代码的可理解性好,缺点是容易导致代码臃肿难看,
而且每个功能模块很容易耦合在一起,不易于拆分。维护起来比较困难,修改时牵一发动全身;

异步解决方案之事件监听
f2做为f1的回调函数
$(document).on('finish', f2);
function f1(){
    console.log('f1')
    setTimeout(function(){
        console.log('f1 again')
        // some code
        $(document).trigger('finish');
    },1000);
}
function f2(){
    console.log('f2')
}
function f3(){
    console.log('f3')
}
// exec functions
f1();
f3();
//执行结果
 f1
 f3
 f1 again
 f2

事件监听的方式,优点是让代码很容易模块化,各个模块之间可以用事件来做接口,每个事件可以指定多个处理函数;这样的缺点是如果一个事件依赖于多个事件的时候,处理起来比较麻烦。

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP