javascript 如何让 JQuery 语句等到它完成后再继续？>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5112405/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I get a JQuery statement to wait until it's completed before continuing?>
提问by Diskdrive
Firstly, I'm new at Javascript / Jquery so it might be a stupid question...
首先，我是 Javascript / Jquery 的新手，所以这可能是一个愚蠢的问题......
I'm using the dialog box that is in the JQuery UI collection. I have a button that when clicked, it either shows a confirm box or an alert box. My code is like below...
我正在使用 JQuery UI 集合中的对话框。我有一个按钮，单击该按钮时，它会显示一个确认框或一个警告框。我的代码如下...
function checkfn() {
if (document.getElementById('<%=HomeInstSelected.ClientID%>').value == 'False') {
var dialogResult = false;
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
Continue: function () {
dialogResult = true;
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close").slideUp();
}
}
});
// alert just debug code!
alert(dialogResult);
return dialogResult;
}
else {
$("#dialog-HomeInstitutionPrompt").dialog({
height: 140,
modal: true
});
}
}
My problem is in the confirm part, it seems the confirm box is not waiting for me to hit Continue or Cancel - it's just going straight to the alert part and returning dialogResult = false.
我的问题出在确认部分，似乎确认框没有等待我点击继续或取消 - 它只是直接进入警报部分并返回 dialogResult = false。
Is it possible to halt execution of until after I've run the $('#dialog-confirm') command?
是否可以在我运行 $('#dialog-confirm') 命令之后停止执行？
Alternatively, is it possible to return true for the checkfn() function, in the Continue function? That way, I will not need a dialogResult var at all?
或者，是否可以在 Continue 函数中为 checkfn() 函数返回 true？这样，我根本不需要 dialogResult 变量？
回答by Brian
I haven't used the .dialog in jQuery UI before, but, in general with jQuery, functions are run asynchronously. What this means is that you need to put the code that you want run in the Continue function.
我之前没有在 jQuery UI 中使用过 .dialog，但是，通常使用 jQuery，函数是异步运行的。这意味着您需要将要运行的代码放在 Continue 函数中。
One possibility is to send a success/cancel function to checkfn that you would call from the Continue and Cancel functions.
一种可能性是向 checkfn 发送一个成功/取消函数，您将从 Continue 和 Cancel 函数调用该函数。
function checkfn(success, cancel) {
if (document.getElementById('<%=HomeInstSelected.ClientID%>').value == 'False') {
var dialogResult = false;
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
Continue: function () {
if(success) success();
$(this).dialog("close");
},
Cancel: function () {
if(cancel) cancel();
$(this).dialog("close").slideUp();
}
}
});
}
You can call the function like this:
你可以这样调用函数：
checkfn(function () {
alert('success!');
}, function () {
alert('failure!');
});
回答by SadullahCeran
Just put everything you want to do inside "Continue" and "Cancel" button definitions. So, you will not need a dialogResult and alert will hit when it is needed.
只需将您想做的所有事情放在“继续”和“取消”按钮定义中。因此，您将不需要 dialogResult 并且警报会在需要时触发。
if (document.getElementById('<%=HomeInstSelected.ClientID%>').value == 'False') {
var dialogResult = false;
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
Continue: function () {
alert('Dialog result is true. I can do whatever I want here');
$(this).dialog("close");
},
Cancel: function () {
alert('Cancel is clicked. I should go on my life');
$(this).dialog("close").slideUp();
}
}
});
}
else {
$("#dialog-HomeInstitutionPrompt").dialog({
height: 140,
modal: true
});
}
-- You can't return a value for your function, because after initialization of the function, the code goes on. You need to fill Continue button definition.
-- 你不能为你的函数返回一个值，因为在函数初始化之后，代码会继续。您需要填写继续按钮定义。
回答by Greg Guida
This is something I struggled with when I started too, The code doesn't run as it reads on the page. When you call the dialog function it executes asynchronously. The continue and cancel functions are bound to the click actions on the buttons, meanwhile the code below the dialog function runs without waiting for the events.
这也是我刚开始时遇到的问题，代码在页面上读取时无法运行。当您调用对话框函数时，它会异步执行。continue 和cancel 函数绑定到按钮上的点击动作，同时dialog 函数下面的代码不等待事件运行。
Long story short the result needs to happen in the cancel and continue callbacks.
长话短说，结果需要在取消和继续回调中发生。
Problem is you're trying to return a boolean value when you should really pass the resulting functions in instead. Alot of things in jquery and javascript in general work that way. Thankfully the language provides the ability to program in this way.
问题是当你真正应该传递结果函数时，你试图返回一个布尔值。jquery 和 javascript 中的很多东西通常都是这样工作的。幸运的是，该语言提供了以这种方式进行编程的能力。
function checkfn( resultfn(boolval) ) {
if (document.getElementById('<%=HomeInstSelected.ClientID%>').value == 'False') {
var dialogResult = false;
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
Continue: function () {
resultfn.call( this, true );
$(this).dialog("close");
},
Cancel: function () {
resultfn.call( this, false );
$(this).dialog("close").slideUp();
}
}
});
}
Put the if statement in "resultfn"
将 if 语句放在“resultfn”中
回答by SharpC
I had a similar frustrating problem where the jQuery dialog box would submit a form before the user had a chance to choose Yes or No.
我有一个类似的令人沮丧的问题，jQuery 对话框会在用户有机会选择是或否之前提交表单。
Example HTML:
示例 HTML：
<form id="myForm" method="POST" action="/Where/To/Go">
<input type="submit" value="Submit" onclick="submitForm()"/>
</form>
And jQuery:
和 jQuery：
function submitForm() {
$('<div title="Submit Form>Are you sure you wish to submit the form?</div>').dialog({
modal: true,
buttons: [
{
text: "Yes",
click: function () {
$('#myForm').submit();
$(this).dialog("close");
}
}, {
text: "No",
click: function () {
$(this).dialog("close");
}
}
]
});
}
To fix the issue I changed the button from a submittype to a buttontype which stopped it submitting and triggering the jQuery dialog at the same time:
为了解决这个问题，我将按钮从submit类型更改为button停止提交并同时触发 jQuery 对话框的类型：
<input type="button" value="Submit" onclick="submitForm()"/>
