jQuery按顺序同步异步请求

jQuery synchronous asynchronous requests in order

本文关键字：异步 请求 同步 顺序 jQuery      更新时间：2023-09-26

我有要同步执行的任务；但我不想冻结浏览器。可能有1--N个任务。

下面是同步版本。它按预期工作，但会冻结浏览器。

我如何使用jQuery延迟对象来完成这些任务，但不锁定浏览器。

注意：我请求的服务器不允许同时进行两次请求。一旦请求按正确的顺序完成，它们就需要一个接一个地运行。

<?php
for ($k = 0;$k<count($partial_transactions);$k++)
{
?>
    $("#formCheckout_<?php echo $k; ?>").ajaxSubmit({
        success:function(response)
        {
            var data = response.split("&");
            var processed_data = [];
            for(var i = 0; i < data.length; i++)
            {
                var m = data[i].split("=");
                processed_data[m[0]] = m[1];
            }           
            $("#please_wait").hide();
            if (processed_data.CmdStatus != 'Approved')
            {
                var message = decodeURIComponent(message);
                message =  processed_data.TextResponse.replace(/'+/g, ' ');
                toastr['error'](<?php echo json_encode(lang('sales_attempted_to_reverse_partial_transactions_failed_please_contact_support'));?>, <?php echo json_encode(lang('common_error')); ?>);
            }
            else
            {
                toastr['success'](<?php echo json_encode(lang('sales_partial_credit_card_transactions_voided')); ?>, <?php echo json_encode(lang('common_success')); ?>);
            }
        },
        cache: true,
        headers: false,
        async: false
    });
<?php
}
?>

试试这个：

var counter = 0;
// Build up an array of all forms that are to be submitted sequentially.
var forms = [
<?php
   for ($k = 0;$k<count($partial_transactions);$k++){
    if($k == 0){
        echo "#formCheckout_{$k}";
    }else{
       echo ", #formCheckout_{$k}"; 
    }
}
?>
];
// Start the request
make_next_request(forms[counter]);
function make_next_request(form){ 
    form.ajaxSubmit({
        success:function(response)
        {
            var data = response.split("&");
            var processed_data = [];
            for(var i = 0; i < data.length; i++)
            {
                var m = data[i].split("=");
                processed_data[m[0]] = m[1];
            }           
            $("#please_wait").hide();
            if (processed_data.CmdStatus != 'Approved')
            {
                var message = decodeURIComponent(message);
                message =  processed_data.TextResponse.replace(/'+/g, ' ');
                toastr['error'](<?php echo json_encode(lang('sales_attempted_to_reverse_partial_transactions_failed_please_contact_support'));?>, <?php echo json_encode(lang('common_error')); ?>);
            }
            else
            {
                toastr['success'](<?php echo json_encode(lang('sales_partial_credit_card_transactions_voided')); ?>, <?php echo json_encode(lang('common_success')); ?>);
            }
            // Now chain request onto next form.
            if(counter < forms.length){
                counter++;
                make_next_request(forms[counter]);
            }
        },
        cache: true,
        headers: false,
        async: false
    });
}

您可以将所有数据都放在一个处理所有数据的web工作程序中，这样UI线程就不会中断（但您必须向用户指示数据正在加载。）

有关更多信息，请参阅web工作者API，但基本上，web工作者是允许您进行多线程操作的本地浏览器对象。换句话说，当用户仍然与网页交互时，您的操作可以在后台运行，然后当操作完成时，它们可以通知UI线程（用户当前所在的线程）

您所说的这种CPU密集型数据加载似乎是这种API的完美用例。

我最终是这样做的。密集的部分是服务器端。所以我采纳了一些建议并提出了这个建议。（使用递归）

<script>
var num_transactions_to_void = <?php echo count($partial_transactions); ?>;
var max_index = num_transactions_to_void - 1;
if (num_transactions_to_void > 0)
{
    void_sale_request(0);
}
function void_sale_request(index)
{   
    if (index > max_index)
    {
        return;
    }
    $("#formCheckout_"+index).ajaxSubmit({
        success:function(response)
        {
            var data = response.split("&");
            var processed_data = [];
            for(var i = 0; i < data.length; i++)
            {
                var m = data[i].split("=");
                processed_data[m[0]] = m[1];
            }           
            $("#please_wait").hide();
            if (processed_data.CmdStatus != 'Approved')
            {
                var message = decodeURIComponent(message);
                message =  processed_data.TextResponse.replace(/'+/g, ' ');
                toastr['error'](<?php echo json_encode(lang('sales_attempted_to_reverse_partial_transactions_failed_please_contact_support'));?>, <?php echo json_encode(lang('common_error')); ?>);
            }
            else
            {
                toastr['success'](<?php echo json_encode(lang('sales_partial_credit_card_transactions_voided')); ?>, <?php echo json_encode(lang('common_success')); ?>);
            }
            void_sale_request(index + 1);
        },
        cache: true,
        headers: false
    });
}
</script>
相关文章：