0

构建一个原型（概念）页面来伪造批准过程。

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

1 回答 1

0

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

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

  1. 显示“请求进行中”消息
  2. AJAX 调用：more_viewing_time_req_send_email()
    2(a)。在send_email success function：AJAX 调用：sleep_timer() 10 秒
            2(a)(i)。in sleep success function：显示“请求已批准”消息
            2(a)(ii)。in 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按钮本身早些时候被之前的 AJAX 调用注入到它的 DIV 中。由于第一次呈现页面时页面上不存在“查看更多”按钮，因此我必须使用$(document).on()它来捕获其单击事件。如果我使用更常见$('#view_more).click()的代码将无法工作，因为它看不到这些事件。

于 2013-05-16T22:50:53.060 回答