Question

我有同步做的任务;但我不想冻结浏览器。可能有1 --- N个任务。

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

如何使用jQuery延迟对象按顺序执行此操作但不能锁定浏览器。

注意：我请求的服务器不允许一次发出2个请求。一旦请求按照确切的顺序完成，他们需要一个接一个地运行。

<?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
}
?>

Answer 1

试试这个：

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
    });
}

Answer 2

您可以将其全部放在处理所有数据的Web工作者中，这样UI线程就不会中断（但您必须向用户提供数据正在加载的一些指示。）

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

您正在谈论的这种CPU密集型数据加载似乎是这种API的完美用例。

Answer 3

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

<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>

jQuery同步异步请求按顺序

3 个答案: