异步编程和同步编程的区别
同步编程：后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的。
异步编程：每一个任务有一个或多个回调函数（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

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

ITPub博客

javascript中常用的异步解决方案

最新文章