这个解决方案依赖于jQuery(1.7+)和jQuery UI的dialog
,但是它被实现为Array原型的自定义方法,而不是jQuery插件。
下面是Array方法的代码:
Array.prototype.runDialogSequence = function(dialogCallback, startIndex, endIndex){
startIndex = Math.max(0, startIndex || 0);
endIndex = Math.min(this.length - 1, endIndex || this.length - 1);
var sequenceIndex = 0,
arr = this,
dfrd = $.Deferred().resolve(startIndex);
function makeCloseFn(seqData){
return function(event, ui){
if(seqData.continue_) { seqData.dfrd.resolve(seqData.arrayIndex+1, seqData); }
else { seqData.dfrd.reject(seqData.arrayIndex, seqData); }
}
}
$.each(this, function(i){
if(i < startIndex || i > endIndex) { return true; }
dfrd = dfrd.then(function(arrayIndex){
var seqData = {
dfrd: $.Deferred(),
arrayIndex: arrayIndex,
sequenceIndex: ++sequenceIndex,
length: 1 + endIndex - startIndex,
item: arr[arrayIndex],
continue_: false
};
dialogCallback(seqData).on("dialogclose", makeCloseFn(seqData));
return seqData.dfrd.promise();
});
});
return dfrd.promise();
}
Array.runDialogSequence()
依赖于以下内容:
- 在文档正文中适合用于填充文本/值的对话框模板。
- 类似项目的数组(通常是JavaScript对象),其中包含按顺序填充对话框所需的数据。
- 将正确构造的 "openDialog" 函数作为第一个参数传递。
以下是带有解释性注释的示例 "openDialog" 函数:
function openDialog(seqData){
var item = seqData.item;
var $d = $("#d");
$d.dialog({
title: 'Dialog (' + seqData.sequenceIndex + ' of ' + seqData.length + ')',
modal: true,
buttons: {
"Continue": function(){
seqData.continue_ = true;
$(this).dialog("close");
},
"Cancel": function(){
$(this).dialog('close');
}
}
}).find("#message").text(item);
return $d;
}
Array.runDialogSequence()
返回一个 jQuery promise
,允许在对话序列完成(done 函数)或在序列中断时执行自定义操作(fail 函数)。
以下是几个示例调用:
$("#myButton1").click(function(){
myArray.runDialogSequence(openDialog);
});
$("#myButton2").click(function(){
myArray.runDialogSequence(openDialog, 1, 3).then(function(i, seqData){
alert('All dialogs complete - last item = "' + seqData.item + '"');
}, function(i, seqData){
alert('Dialog sequence was broken at item ' + i + ' "' + seqData.item + '"');
});
});
演示
这是我所能想到的最通用的解决方案。
alert()
,并让它像alert
一样运行。 - Kevin Balert
是同步的。你不能像那样停止函数执行 - 除非使用JS1.7的协程/yield
,但这不太跨浏览器,并且需要在脚本类型上定义一个version
。你应该将i
存储在执行上下文中,并将其传递给一个函数,该函数使用它进行一次迭代,调用您的样式化警报,再次将递增的i
传回您的迭代器函数。 - Fabrício Matté