异步JS

最近忙于工作项目，很久没有写博客了，然而博客还是得写，帮助很大。三言两语也好，以后尽量抽空多写写。欢迎指正交流。

第一次接触到异步的概念来自于ajax，即页面向服务端发请求，不等待返回结果而继续向后执行，当结果返回时执行回调，回调函数执行的时机是不确定的，取决于服务端何时返回结果。相对的，同步就是指一直等到结果返回后才继续向后执行。

我理解中，JS中实现异步的方式有两种：回调和事件监听

一. 回调（callback）

最基本的回调方式，用一个简单的应用场景来阐述，假设我们要搜索数据，然后进行处理，最后显示结果，用异步来实现。在现实工作中这些函数会发出ajax请求并得到返回结果，现在我们就用setTimeout来简单模拟一下

function finder(records, callback) {
    setTimeout(function() {
        records.push(3, 4);
        callback(records);
    }, 1000);
}    

function processer(records, callback) {
    setTimeout(function() {
        records.push(5, 6);
        callback(records);
    }, 1000);
}

finder([1, 2], function(records) {
    processor(records, function(records) {
        console.log(records);
    });
});

我们调用finder函数，传入了一个回调函数，在这个回调函数中我们又调用processor函数，给它传入另一个回调函数。起个名字来引用回调函数可以使代码更易读

function onFinderDone(records) {
    processor(records, onProcessorDone);
}

function onProcessorDone(records) {
    console.log(records);
}

finder([1, 2], onFinderDone);

这种方式简单好理解，但其最大的一个缺点是你只能传入一个回调函数。

二. 事件监听（listener）

这块用到了jQuery的一些方法，不必太在意，重点在于阐述道理

首先我们需要两个对象，一个负责搜索数据，一个负责处理数据

var finder = {
    run: function(records) {
        var self = this;
        setTimeout(function() {
            records.push(3, 4);
            self.trigger('done', [records]);
        }, 1000);
    }
};

var processor = {
    run: function(records) {
        var self = this;
        setTimeout(function() {
            records.push(5, 6);
            self.trigger('done', [records]);
        }, 1000);
    }
};

与上例回调方式对比，我们把调用回调函数替换成了trigger方法，定义如下

var eventable = {
    on: function(event, callback) {
        $(this).on(event, callback);
    },
    
    trigger: function(event, args) {
        $(this).trigger(event, args);
    }
};

让我们的finder和processor对象获得事件监听、发布的能力

$.extend(finder, eventable);
$.extend(processor, eventable);

执行

finder.on('done', function(event, records) {
    processor.run(records);
};

processor.on('done', function(event, records) {
    console.log(records);
};

finder.run([1, 2]);

这种模式最大的优点在于你可以指定任意多个事件处理函数

原文中这一块过于依赖jQuery库，这里我参考了martinfowler的事件聚合（Event Aggregator），（原文http://martinfowler.com/eaaDev/EventAggregator.html或参考汤姆大叔的深入理解javascript系列），有兴趣的同学可以看看

function Event(name) {
    var handlers = [];
    this.getName = function() {
        return name;
    };
    this.addHandler = function(handler) {
        handlers.push(handler);
    };
    this.removeHandler = function(handler) {
        for (var i = 0; i < handlers.length; i++ ) {
            if (handlers[i] == handler) {
                handlers.splice(i , 1);
                break;
            }
        }
    };
    this.fire = function(eventArgs) {
        for (var i = 0; i < handlers.length; i++ ) {
            handlers[i](eventArgs);
        }
    };
}

function EventAggregator() {
    var events = [];
    function getEvent(eventName) {
        return $.grep(events, function(event) {
            return event.getName() == eventName;
        })[0];
    }
    this.subscribe = function(eventName, handler) {
        var event = getEvent(eventName);
        if (!event) {
            event = new Event(eventName);
            events.push(event);
        }
        event.addHandler(handler);
    };
    this.publish = function(eventName, eventArgs) {
        var event = getEvent(eventName);
        if(!event) {
            event = new Event(eventName);
            events.push(event);
        }
        event.fire(eventArgs);
    };
}

 译自：http://sporto.github.io/blog/2012/12/09/callbacks-listeners-promises/