jQuery AJAX程序不按顺序流动

时间:2013-05-16 21:04:53

标签: jquery

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

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

1 个答案:

答案 0 :(得分:0)

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

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

  1. 显示“正在申请”消息
  2. 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中:执行最终所需操作
  3. 解决方案现在看起来像这样:

    $(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()代码将无法工作,因为它无法看到这些事件。