本文译自http://dojotoolkit.org/reference-guide/dojo/DeferredList.html#dojo-deferredlist dojo.Deferred提供了一种“一问一答”的事件处理机制,dojo.DeferredList则在其之上提供了“一个答案回答多个问题”的
<本文译自http://dojotoolkit.org/reference-guide/dojo/DeferredList.html#dojo-deferredlist>
dojo.Deferred提供了一种“一问一答”的事件处理机制,dojo.DeferredList则在其之上提供了“一个答案回答多个问题”的机制。<译注:“一个答案回答多个问题”更符合publisher-subscriber模型。dojo.DeferredList处理的是一个事件必须以多个事件的完成为前提的情况,即Windows API WaitForMultipleObjects应用的场合。>
一个常见的任务是,当一串由不同服务提供的资源都可用时,通知某个阻塞的任务开始执行。例如,一个跨多个书店的搜索操作。
<译注:此处省略关于为什么需要DeferredList的若干说明。大意是,以一个跨多个书店的搜索操作为例,用户需要看到的时所有书店的搜索结果的综合结果。一种不好的做法是,依次发出对每个书店的搜索请求,搜集结果,在所有搜索请求完成之后再综合结果。这样整个操作串行化了,耗时为每个操作耗时的总和;如果使用DeferredList,则耗时为单个操作的最长时间。其实使用DeferredList还有另一个好处,就是代码形式上的简洁>
代码示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html dir="ltr"> <head> <style type="text/css"> body, html { font-family:helvetica,arial,sans-serif; font-size:90%; } </style> <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djConfig="parseOnLoad: true"> </script> <script type="text/javascript"> dojo.require("dojo.DeferredList"); dojo.require("dijit.form.Button"); dojo.addOnLoad(function() { // stub search functions to simulate network delay function searchAmazon() { var d = new dojo.Deferred(); setTimeout(function() { d.callback("We found books at amazon"); }, 500); return d; } function searchBol() { var d = new dojo.Deferred(); setTimeout(function() { d.callback("We found books at bol"); }, 700); return d; } function searchGoogle() { var d = new dojo.Deferred(); setTimeout(function() { d.callback("We found books at google"); }, 200); return d; } dojo.connect(dijit.byId("search"), "onClick", function() { var d1 = searchAmazon(), d2 = searchBol(), d3 = searchGoogle(); dojo.byId("statusSearch").innerHTML = "Searching...."; // create a deferred list to aggregate the state var dl = new dojo.DeferredList([d1, d2, d3]); // a DeferredList has much the same API as a Deferred dl.addCallback(function(res) { // "res" is an array of results dojo.byId("statusSearch").innerHTML = "Result: " + res[0][1] + ", " + res[1][1] + ", " + res[2][1]; console.log(res); }); }); }); </script> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" /> </head> <body class=" claro "> <button dojoType="dijit.form.Button" id="search"> Search </button> <div style="margin: 10px;"> Status: <span id="statusSearch"> </span> </div> <!-- NOTE: the following script tag is not intended for usage in real world!! it is part of the CodeGlass and you should just remove it when you use the code --> <script type="text/javascript"> dojo.addOnLoad(function() { if (document.pub) { document.pub(); } }); </script> </body> </html>
<译注:代码searchXXX使用setTimeout对异步操作进行了模拟,真实的代码更象是下面这样:
function searchAmazon(query){ return dojo.xhr("GET", { url: "/books/amazon", content: { q: query } }); }dojo.xhr会返回一个 Deferred对象,也就是说,在其内部实现里,会有一个deferred.callback({/*some result object*/})的调用。