[英]Wait for callback before continue for loop
I've a for-loop I'm looping through. 我有一个for循环,我正在循环。
I want to make a custom modal and wait for a response before continue it. 我想制作一个自定义模态并在继续之前等待响应。
How can I achieve this? 我怎样才能做到这一点? I know I've to wait for a callback.
我知道我要等待回电。
Like this example: 像这个例子:
for(var x in array){
alert(x);
console.log(x);
}
It does exactly what I want to. 它完全符合我的要求。 But I want to have three buttons.
但我想要三个按钮。 But alert is not part of javascript(? It's in the browser.)
但警报不是javascript的一部分(?它在浏览器中。)
So, do you guys have an idea? 所以,你们有个主意吗?
I was thinking about doing something like this: 我在考虑做这样的事情:
var run = true;
function foo(){
if (run){
setTimeout(foo, 500);
}
}
function stop(){
run = false;
}
foo();
and then wait for a stop which calls on a button click before continue. 然后等待停止,在继续之前调用按钮单击。 But is this really good practice?
但这是非常好的做法吗?
Or use a lambda function as a parameter to the customAlert and a "global" variable that holds the current position of the array I'm going through and do this with functions. 或者使用lambda函数作为customAlert的参数和一个“全局”变量,该变量保存我正在经历的数组的当前位置并使用函数执行此操作。 Like: Check if array is still holding keys greater than X. Then do the function again and each time increase the global X.
像:检查数组是否仍然保持大于X的键。然后再次执行该功能,每次增加全局X.
Thank you lostsource for the code: Oh, I got an idea; 谢谢你输错代码:哦,我有个主意; I'll simply use lostsource's solution inside an anonymous function, so I don't get global variables.
我只是在匿名函数中使用lostsource的解决方案,所以我不会得到全局变量。 Excellent.
优秀。
(function(){
})();
Assuming this is your array 假设这是你的阵列
var list = ['one','two','three'];
You can try using this loop / callback approach 您可以尝试使用此循环/回调方法
var x = 0;
var loopArray = function(arr) {
customAlert(arr[x],function(){
// set x to next item
x++;
// any more items in array? continue loop
if(x < arr.length) {
loopArray(arr);
}
});
}
function customAlert(msg,callback) {
// code to show your custom alert
// in this case its just a console log
console.log(msg);
// do callback when ready
callback();
}
Usage: 用法:
// start 'loop'
loopArray(list);
JSFiddle here: http://jsfiddle.net/D9AXp/ JSFiddle: http : //jsfiddle.net/D9AXp/
MaggiQall, I know you have an answer but I have a flexible solution that may be of interest to you or maybe to someone else. MaggiQall,我知道你有答案,但我有一个灵活的解决方案,你可能会感兴趣或者可能对别人感兴趣。
The solution depends on jQuery (1.7+) and jQuery UI's dialog
, but is implemented as a custom method of the Array prototype, not as a jQuery plugin. 解决方案依赖于jQuery(1.7+)和jQuery UI的
dialog
,但是作为Array原型的自定义方法实现,而不是作为jQuery插件。
Here's the Array method : 这是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); } //continue dialog sequence
else { seqData.dfrd.reject(seqData.arrayIndex, seqData); } //break dialog sequence
}
}
$.each(this, function(i){
if(i < startIndex || i > endIndex) { return true; }//continue
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()
relies on : Array.runDialogSequence()
依赖于:
Here's a sample "openDialog" function with explanatory comments : 这是一个示例“openDialog”函数,带有解释性注释:
function openDialog(seqData){
/*
seqData is an object with the following properties:
dfrd: A Deferred object associated with the current dialog. Normally resolved by Array.runDialogSequence() to run through the sequence or rejected to break it, but can be resolved/rejected here to force the dialog sequence to continue/break. If resolved, then pass (seqData.arrayIndex+1, seqData), or custom values. If rejected, typically pass (seqData.arrayIndex, seqData).
arrayIndex: The current array index.
sequenceIndex: The current index within the sequence. Normally the same as arrayIndex but Differs when a non-zero startIndex is specified.
length: The full length of the dialog sequence.
item: The current item from the array.
continue_: (false) Set to true to allow the sequence to continue.
*/
var item = seqData.item;
var $d = $("#d");
$d.dialog({
title: 'Dialog (' + seqData.sequenceIndex + ' of ' + seqData.length + ')',
modal: true,
buttons: {
"Continue": function(){
seqData.continue_ = true;//set to true before closing to go to next dialog.
$(this).dialog("close");
},
"Cancel": function(){
$(this).dialog('close');//closing with seqData.continue_ set to its default value false will break the dialog sequence.
}
}
}).find("#message").text(item);//Typically you will do a lot more here to populate the dialog with item data.
return $d;//openDialog() must return a dialog container, jQuery-wrapped.
}
Array.runDialogSequence()
returns a jQuery promise
, allowing custom actions to be performed when the dialog sequence completes (done function) or is broken in mid-sequence (fail function). Array.runDialogSequence()
返回一个jQuery promise
,允许在对话框序列完成时执行自定义操作(完成功能)或在中间序列中执行自定义操作(失败功能)。
Here are a couple of sample calls : 以下是一些示例调用:
//Simplest possible
$("#myButton1").click(function(){
myArray.runDialogSequence(openDialog);
});
//Call with custom startIndex and endIndex, and chanined `.then()` to provide custom actions on break/completion.
$("#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 + '"');
});
});
This is as close to a generalized solution as my imagination allows. 这与我的想象所允许的一般化解决方案非常接近。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.