javascript - 在 'each' 函数中创建 ajax 请求循环

Question

这个主题包含在其他几个问题中，但是我在将建议的方法应用到这个用例中时遇到了一些困难。我有一个复选框列表，用户可以在其中选择 n 个子站点来发布其帖子。由于此列表可能会增长到 100 多个，因此我需要一种有效的方法来对每个列表执行昂贵的任务。如果需要一段时间也没关系，只要我提供视觉反馈，所以我计划在每个复选框项目工作时应用“进行中”样式，然后在成功发布后移至列表中的下一个项目。另请注意:我正在使用 WordPress wp_ajax_ Hook ，但 PHP 方面运行良好，这里重点关注 JS 解决方案。

此代码现在正在运行(console.logs 留在调试中)，但我看到了多个针对使用 async: true 的警告。如何以更有效的方式实现瀑布式 AJAX 循环？

//Starts when user clicks a button
 $("a#as_network_syndicate").click( function(e) {
    e.preventDefault(); //stop the button from loading the page

//Get the checklist values that are checked (option value = site_id)    
 $('.as-network-list').first().find('input[type="checkbox"]').each(function(){
        if($(this).is(':checked')){
            blog_id = $(this).val();

            console.log(blog_id+' started');

            $(this).parent().addClass('synd-in-progress');  //add visual feedback of 'in-progress'
            var process = as_process_syndication_to_blog(blog_id);

            console.log('finished'+blog_id);

            $(this).parent().removeClass('synd-in-progress');
        }
    });
});

function as_process_syndication_to_blog(blog_id){

    var data  = { 
            "post_id": $('#as-syndicate_data-attr').attr("data-post_id"),  //these values are stored in hidden html elements
            "nonce": $('#as-syndicate_data-attr').attr("data-nonce"),
            "blog_id": blog_id
        };

    var result = as_syndicate_to_blog(data);

    console.log('end 2nd func');

    return true;
}
function as_syndicate_to_blog(data){
    $.ajax({
        type : "post",
        dataType : "json",
        async: false,
        url : ASpub.ajaxurl, //reference localized script to trigger wp_ajax PHP function
        data : {action: "as_syndicate_post", post_id : data.post_id, nonce: data.nonce, blog_id: data.blog_id},
        success: function(response) {
            if(response.type == "success") {
                console.log(response);

                return response;
            } else {

            }
        },
        error: {

        }
    });
}

Answer 1

事实上，进行同步 AJAX 请求是不好的，因为它会在整个 AJAX 调用期间阻塞浏览器。这意味着用户在此期间无法与您的页面交互。就您的情况而言，如果您执行 30 个 AJAX 调用(例如 0.5 秒)，则浏览器将在 15 秒内被阻止，这是很多。

无论如何，您都可以按照以下模式执行某些操作:

// some huge list
var allOptions = [];

function doIntensiveWork (option, callback) {
    // do what ever you want
    // then call 'callback' when work is done
    callback();
}

function processNextOption () {
    if (allOptions.length === 0)
    {
        // list is empty, so you're done
        return;
    }

    // get the next item
    var option = allOptions.shift();

    // process this item, and call "processNextOption" when done
    doIntensiveWork(option, processNextOption);

    // if "doIntensiveWork" is asynchronous (using AJAX for example)
    // the code above might be OK.

    // but if "doIntensiveWork" is synchronous,
    // you should let the browser breath a bit, like this:
    doIntensiveWork(option, function () {
        setTimeout(processNextOption, 0);
    });

}

processNextOption();

注意:正如 Karl-André Gagnon 所说，您应该避免使用此技术执行许多 AJAX 请求。如果可以的话尝试将它们结合起来，会更好更快。