构建一个假设批准过程的原型(概念)页面。
当用户点击 #view_more 按钮时,所需的行为是“请求更多时间”消息显示在div中并继续显示,而javascript使用AJAX调用PHP睡眠函数十秒钟。
但是,该消息不会出现。相反,异步ajax调用导致10秒延迟,然后消息在处理继续之前一瞬间出现。我该如何解决这个问题?
JAVASCRIPT:
$(document).on('click', '#view_more', function() {
var cust = $('#cust').val();
$('#buttons').html('<div id="countdown">Requesting More Time...</div>');
$('#buttons').show();
//Now, send email to admin
$.ajax({
type: "POST",
url: "ajax/ax_all_ajax_fns.php",
data: 'request=more_viewing_time_requested_send_email&cust='+cust
});
$.ajax({
type: "POST",
async: false,
url: "ajax/ax_all_ajax_fns.php",
data: 'request=sleep_timer&delay=10'
});
alert('Additional viewing time authorized for this account.');
location.reload(true);
});
PHP(ax_all_ajax_fns.php):
if ($_POST['request'] == 'sleep_timer') {
$delay = (int)$_POST['delay'];
sleep($delay);
}
答案 0 :(得分:0)
当一个人最终可以回答他自己的问题时,总是很好。
解决方案是将以后发生的事情放在早期事情的成功回调函数中,以便:
send_email success function
中:AJAX调用:sleep_timer()10秒sleep success function
中:显示“请求已批准”消息sleep success function
中:执行最终所需操作解决方案现在看起来像这样:
$(document).on('click', '#view_more', function() {
var cust = $('#cust').val();
$('#buttons').html('<div id="countdown">Requesting More Time...</div>');
$('#buttons').show();
//Now, send email to admin
$.ajax({
type: "POST",
url: "ajax/ax_all_ajax_fns.php",
data: 'request=more_viewing_time_requested_send_email&cust='+cust,
success: function() {
$.ajax({
type: "POST",
async: false,
url: "ajax/ax_all_ajax_fns.php",
data: 'request=sleep_timer&delay=10',
success: function() {
alert('Additional viewing time authorized.');
location.reload(true);
} //END success #2
}); //END $.ajax #2
} //END success #1
}); //END AJAX more_viewing_time_send_email
}); //END $('view_more').click()
对于那些想知道的人(就像我曾经那样,不久之前)......我使用$(document).on()
的原因是因为 View More 按钮本身被更早地注入其DIV通过之前的AJAX调用。由于页面首次呈现时页面上不存在“查看更多”按钮,因此我必须使用$(document).on()
来捕获其点击事件。如果我使用更常见的$('#view_more).click()
代码将无法工作,因为它无法看到这些事件。