我正在使用 Caolan McMahon 的异步库 async.js library 和 jQueryUI 进度条progress bar 为用户提供反馈,同时多个异步调用收集数据并填充复杂图表的元素。
我的问题是:最好的方法是什么,可以让异步方法共享数据?
这是我所做的简化示例。使用全局变量已经可以工作,但它们会让我感到不安,并且让 jsLint 发出警告。将参数传递或将其限定在文档准备函数中会导致它失败。
在我的真实代码中,updateA() 等对应的代码有数百行,包括 XHR 调用。
JavaScript:
我的问题是:最好的方法是什么,可以让异步方法共享数据?
这是我所做的简化示例。使用全局变量已经可以工作,但它们会让我感到不安,并且让 jsLint 发出警告。将参数传递或将其限定在文档准备函数中会导致它失败。
在我的真实代码中,updateA() 等对应的代码有数百行,包括 XHR 调用。
JavaScript:
// global variables. Bad?
var steps = 3;
var ticked = 0;
var otherCounter = 0;
$(function() {
$('#progressbar').progressbar({
value: 0
});
async.parallel([
function(onDoneCallback) {
updateA(onDoneCallback);},
function(onDoneCallback) {
updateB(onDoneCallback);},
function(onDoneCallback) {
updateC(onDoneCallback);}
], function(err, results) { // final callback when they're all done
tickProgress('All done after ' + ticked + ' ticks.', true);
});
});
function tickProgress(message) {
var curvalue = $('#progressbar').progressbar('option', 'value');
var done = false;
if (arguments.length > 1) {
done = arguments[1];
}
$('#progress_text').html(message);
if (done) {
$('#progressbar').progressbar('option', 'value', 100);
}
else {
$('#progressbar').progressbar('option', 'value', curvalue + 100 / steps);
}
ticked++; // global OK here?
}
function updateA(onDoneCallback) {
setTimeout(function() {
$('#a').html('A is foo. otherCounter ' + otherCounter);
tickProgress('updated A at otherCounter ' + otherCounter);
otherCounter++;
onDoneCallback(null, 'A done');
}, 1000);
}
function updateB(onDoneCallback) {
setTimeout(function() {
$('#b').html('B is bottle. otherCounter ' + otherCounter);
tickProgress('updated B at otherCounter ' + otherCounter);
otherCounter++;
onDoneCallback(null, 'B is OK');
}, 100);
}
function updateC(onDoneCallback) {
setTimeout(function() {
$('#c').html('C is cauliflower. otherCounter ' + otherCounter);
tickProgress('updated C at otherCounter ' + otherCounter);
otherCounter++;
onDoneCallback(null, 'C done');
}, 2000);
}
HTML:
<p id="progress_text" style="background:yellow">Loading...</p>
<div id="progressbar"></div>
<hr />
<h2>a</h2>
<p id="a">Looking up a...</p>
<h2>b</h2>
<p id="b">Looking up b...</p>
<h2>c</h2>
<p id="c">Looking up c...</p>
Fiddle:
如果您想在那里尝试,请使用JSFiddle上的示例代码。