基于dojo.DeferredList的事件等待机制一例

dojo.DeferredList很好地解决了一个事件的触发需要在多个资源上等待的情况。先来回顾一下它的使用：

假设事件doSomething需要两个资源res1和res2同时可用时才能触发，用下面的示例代码来模拟：

function waitForResource(/*String*/resourceName){    var d = new dojo.Deferred();    setTimeout(function(){        d.callback(resourceName + " is available");    }, 1700);    return d;}function doSomething(res){    console.log(">>> doSomething");    dojo.forEach(res, function(item, index, array){        console.log(index, item[0], item[1]);    });    console.log("<<< doSomething");    console.timeEnd("timer");}var waitObj1 = waitForResource('res1');var waitObj2 = waitForResource('res2');var waitObjects = new dojo.DeferredList([waitObj1, waitObj2]);console.time("timer");waitObjects.then(doSomething);

为了验证doSomething函数的确是在资源可用之后才触发，我们使用了firebug的API console.time和console.timeEnd.这两个API需要成对使用，并且都接受一个字符串参数，即Timer的名字。只有当time和timeEnd的调用成对且名字相同时，firebug才会在控制台打印出两个调用之间所花的时间。

下面是运行结果：

>>> doSomething dojo.xd.js (第 14 行)0 true res1 is available dojo.xd.js (第 14 行)1 true res2 is available dojo.xd.js (第 14 行)<<< doSomething dojo.xd.js (第 14 行)timer: 1713ms dojo.xd.js (第 14 行)

运行时间是1713ms，因此doSomething的确是在资源可用之后才被触发。

非常好用。但是...

上述代码为演示目的，集中在一个模块中，所以变量都可以彼此引用。考虑到这样的情况：我们先用dojo.require请求了一个新的模块文件。dojo.ready()可以确保只有在模块加载成功后再执行后面的代码。这个模块又象服务器请求一段数据，比如是对这个模块的配置。

Module.A:dojo.require("newModule");when (newModule is ready and data is ready)    doSomething;newModule:var waitObject = waitForResource(...);

在模块A中，我们可以创建一个Deferred对象来确保dojo将模块加载成功，创建一个DeferredList来确保两个资源（模块，数据）都可用。但问题是如何将waiteObject传给这个DeferredList呢？如果有更多的类似情况呢？

如果应用程序有一个全局的单例对象，比如说叫Application，它有一个state状态来跟踪所有需要等待的资源。这样，我们就可以在程序的任意地方向这个对象注册要等待的资源，而在需要等待的资源才能继续执行的地方来判断能否继续。

var State = function(){    var op = this.constructor.prototype;    if (!op.registerEvent){        op.registerEvent = function(/*String*/resName, /*dojo.Deferred*/df){            if (!this[resName]){                this[resName] = {};                this[resName]._dfList = [];            }            this[resName]._dfList.push(df);            console.log("%d wait object(s) in the queue [%s]",this[resName]._dfList.length, resName);            this[resName]._dl = new dojo.DeferredList(this[resName]._dfList);        }    }    if (!op.ready){        op.ready = function ready(/*String*/resName, /*function*/doSomething){            if (this[resName]._dl){                var destroy = dojo.hitch(this, this._destroy);                this[resName]._dl.then(function(res){doSomething(res); destroy(resName)});            }else{                doSomething();            }        }    }    if (!op._destroy){        op._destroy = function(/*String*/resName){            console.log("destroy", resName);            this[resName]._dl = null;            this[resName]._dfList = [];        }    }}function waitForResource(/*String*/resourceName, /*Int*/ETA){    var d = new dojo.Deferred();    setTimeout(function(){d.callback(resourceName + " is ready");}, ETA);    return d;}var state = new State();var d1 = waitForResource("ModuleB", 3000);state.registerEvent("resource batch 1", d1);function use(){state.ready("resource batch 1", function(res){    dojo.forEach(res, function(item, index, array){        console.log(index, item);    });    console.log("use: ready to do something");});}function use2(){state.ready("resource batch 2", function(res){    dojo.forEach(res, function(item, index, array){        console.log(index, item);    });    console.log("use2: ready to do something");});}setTimeout(use, 0);d1 = waitForResource("ModuleB", 2000);d2 = waitForResource("Data", 1000);state.registerEvent("resource batch 2", d1);state.registerEvent("resource batch 2", d2);setTimeout(use2, 1500);setTimeout(use2, 1500);

程序不但考虑了一个事件需要等待多个资源的情况，而且考虑了多个事件需要等待多批资源的情况（尽管Javascript引擎在浏览器中的实现是单线程，但它的事件处理机制，加上setTimeout等机制使得上述第二种情况仍然有可能出现）。每一批资源都关联到一个资源名字，或者用待激活的事件名来命名也可以。

现在，只要将State对象设为全局对象，就可以在任何地方，在为某事件请求资源时注册一个等待事件，在使用资源前通过State.ready(/*String*/resourceName, /*Function*/handler)来进行资源请求完成后的处理。如果是请求数据，则需要处理的数据会保存在handler惟一的参数res中。

参数res在dojo.Deferred的handler中是一个对象，它的值是由Deferred对象当初调用callback()函数时传入的。参数res在dojo.DeferredList的handler中是一个数组，每个数组元素具有{/*boolean*/fired, /*object*/data}这样的结构。这也可由上述代码在firebug中运行的结果中看出来：

结合运行结果作一些分析。首先，跟dojo.Deferred/dojo.DeferredList一样，state.ready()并不能阻塞其后代码运行，只能阻塞传入其中的回调函数的运行，直到所请求的资源可用为止。因此，代码段一开始运行就立刻注册了三个资源请求，分别处于两个不同的队列中。

由于第一批资源要在3秒钟以后才可用，第二批资源最迟不超过2秒钟可用，因此函数use2率先被激活。测试代码中调用了两次use2,但第2次调用时没有任何被阻塞的现象，这也是我们期望的。即如果等待的一批资源一旦可用，那么无论其后对同一批资源无论测试多少次，都不应该被阻塞。同样，destroy也被调用两次，不过第二次实际上并没有任何效果（但也没有副作用）。