jquery - 如何在 jquery-alerts.js 中的 jConfirm 条件下停止执行

Question

请检查以下代码：

我不想alert('End');在确认确认对话框之前执行。

<link href="http://labs.abeautifulsite.net/archived/jquery-alerts/demo/jquery.alerts.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://labs.abeautifulsite.net/archived/jquery-alerts/demo/jquery.alerts.js"></script>
<script type="text/javascript">

			$(document).ready( function() {
            $("#confirm_button").click( function() {
					alert('Start');
                    jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
	                if(r){alert('Ok');}else{alert('Cancel');}
             });
					 alert('End');
			 });
});

		</script>
<fieldset>
			<legend>Confirm</legend>
 
			<p>
				<input id="confirm_button" type="button" value="Show Confirm">
			</p>
		</fieldset>

Answer 1

当您调用异步函数时，您无法阻止代码执行（如本例中的 jConfirm，另一个流行示例是ajax()）。

当您使用异步函数时，您还必须使用回调函数。

对话框关闭后需要执行的代码需要进入function(r) { ... }- 其他所有内容都将并行执行。

jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
    if(r){alert('Ok');}else{alert('Cancel');}
    // Put your code here and it will be executed when the dialog is closed.
});

<link href="http://labs.abeautifulsite.net/archived/jquery-alerts/demo/jquery.alerts.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://labs.abeautifulsite.net/archived/jquery-alerts/demo/jquery.alerts.js"></script>
<script type="text/javascript">

			$(document).ready( function() {
            $("#confirm_button").click( function() {
					alert('Start');
                    jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
	                if(r){alert('Ok');}else{alert('Cancel');}
                    alert('End');
             });
					 
			 });
});

		</script>
<fieldset>
			<legend>Confirm</legend>
 
			<p>
				<input id="confirm_button" type="button" value="Show Confirm">
			</p>
		</fieldset>