Question

嗨，我有一个很大的问题，一直困扰着我很长一段时间，大部分时间我都能避免它，但现在没有别的办法了。下面是一个函数，在执行时会为每个复选框发送一个post请求。我需要它等到$ .each完成刷新页面。我已经在每个和每个外部的回调中使用location.reload执行了测试。在10个选中的方框中，只有7-8个在$ .each的回调中重新加载，如果在$ .each之后移动（仍然在.click中），则处理3-4个。我需要它等待，不知何故，$ .each完成然后刷新页面。有没有办法做到这一点？

$('button.moveToTable').click(function(event){
            $("input:checked").each(function(){
                $.post('/table/move-to-table',
                {orderID: $(this).val(),
                    tableID: $('#moveToTableID').val()
                },
                function(data){
                    location.reload();
                });
            });
            //location.reload();
        });

Answer 1

一种简单的方法是将元素的数量存储在全局范围中并减去它们。当最后一个元素完成请求时，它将重新加载。请注意，如果某个请求返回错误，则会失败，您必须处理错误事件以及减去window.Remaining。两次或多次点击也可能会破坏此方法。

window.Remaining = 0;
$('button.moveToTable').click(function(event){
    window.Remaining = $("input:checked").length;
    $("input:checked").each(function(){
        $.post('/table/move-to-table',
        {orderID: $(this).val(),
            tableID: $('#moveToTableID').val()
        },
        function(data){
            --window.Remaining;
            if (window.Remaining == 0)
                window.location.reload();
        });
    });
    //location.reload();
});

Answer 2

不确定这是否是最佳解决方案，但一个想法是增加为每个请求发送的请求的计数，然后在请求返回时减少它。

使用计数作为标志来确定reload()是否应该触发。

这样的事情：

var count = 0;

$('button.moveToTable').click(function(event){
            $("input:checked").each(function() { 
                count++; // Increment the counter for each request

                $.post('/table/move-to-table',
                {orderID: $(this).val(),
                    tableID: $('#moveToTableID').val()
                },
                function(data) { 
                    count--; // Decrement as the requests return

                        // Only reload if the count is 0
                    if( count === 0 )
                        location.reload();
                });
            });
        });

您应该有一些代码可以阻止第二次点击发生click。您可以使用相同的count变量。

如：

if( count === 0 ) { 
    $("input:checked").each(func...

或者更好的想法可能是使用this solution from nsw1475，如果您可以使用该选项，则只为所有复选框发送一个请求。

Answer 3

更好，更有效和无错误的方法可能是使用each（）函数生成一个json数组，用于存储已选中的复选框，然后使用.post将所有数据传递到一起。完成后，调用页面刷新。

jquery等待$ .each完成

3 个答案: