javascript - 在成功返回 jQuery ajax 和每个

Question

在 php 中，我知道每个函数都可以返回 true/false。 JavaScript 也是如此，一个 jQuery $.each 迭代怎么能被这个 true/false 操作呢？我的意思是我怎样才能让迭代停留直到它得到响应？

现在我在 jQuery 中使用函数 setTimeout()，但我想用 true/false 响应替换并转到下一次迭代，有什么办法吗？

我的脚本是:

$(document).on( "click", '#sync',function(e) {
    e.preventDefault();
    $('#sync').prop('disabled', true);
    $.ajax({
            type: "POST",
            url:"./post/dataUrl",    
            data: {},
            dataType: 'json',
            success: function(data){
                if(data.status == 'success'){
                    console.log('Success, lets start the sync !');

                    $.each(data.data, function(i,item){
                        setTimeout(function() {
                            syncData(item.product_id);

                            var percentage = Math.ceil((i/data.total)*1000)/10;
                            $('#test').html('<div class="note note-success"><p>The sync is working... '+percentage+'% '+i+'/'+data.total+' <code>'+item.product_id+'</code></p></div>')

                            if(i == data.total - 1){
                                $('#sync').prop('disabled', false);
                                $('#test').empty();
                            }
                        }, i * 500); //So, in practic it runs after each 500ms, how can i replace this by standing on the response of syncData(product_id) ?
                    });
                    return false;
                }
            }
    });
});

function syncData(product_id){
    $.ajax({
            type: "POST",
            url:"./post/dataSave",    
            data: {product_id: product_id},
            dataType: 'json',
            success: function(data){
                if(data.status == 'success'){
                    return true;
                }
            }
    });
}

Answer 1

您无法真正阻止每个循环迭代彼此紧接着运行。这听起来更像是你想要一个回调来触发下一个项目。我自己没有测试过这段代码，但它应该会提示您如何去做。对于每个完成的 syncData，它将同步下一个项目。

$(document).on( "click", '#sync',function(e) {
    e.preventDefault();
    $('#sync').prop('disabled', true);
    $.ajax({
            type: "POST",
            url:"./post/dataUrl",    
            data: {},
            dataType: 'json',
            success: function(data){
                if(data.status == 'success'){
                    console.log('Success, lets start the sync !');
                    function syncItem(i) {
                        var percentage = Math.ceil((i/data.total)*1000)/10;
                        $('#test').html('<div class="note note-success"><p>The sync is working... '+percentage+'% '+i+'/'+data.total+' <code>'+item.product_id+'</code></p></div>')
                        if (i == data.total) {
                            $('#sync').prop('disabled', false);
                            $('#test').empty();
                        } else {
                            var item = data.data[i];
                            syncData(item.product_id, function () {
                                // Here we make the next item sync
                                syncItem(i + 1);
                            }
                        }
                    }
                    if (data.total > 0) {
                        syncItem(0);
                    } else {
                        // handle empty data case
                    }
                }
            }
    });
});

function syncData(product_id, callback){
    $.ajax({
            type: "POST",
            url:"./post/dataSave",    
            data: {product_id: product_id},
            dataType: 'json',
            success: function(data){
                if(data.status == 'success'){
                    callback();
                }
            }
    });
}