Question

构建一个假设批准过程的原型（概念）页面。

当用户点击 #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);
}

Answer 1

当一个人最终可以回答他自己的问题时，总是很好。

解决方案是将以后发生的事情放在早期事情的成功回调函数中，以便：

显示“正在申请”消息
AJAX Call：more_viewing_time_req_send_email（）
图2（a）。在send_email success function中：AJAX调用：sleep_timer（）10秒
图2（a）（i）中。在sleep success function中：显示“请求已批准”消息
图2（a）（ii）中。在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()代码将无法工作，因为它无法看到这些事件。

jQuery AJAX程序不按顺序流动

1 个答案: