javascript - jquery在ajax上更新dom完成

Question

我遇到了一些问题，dom 仅在 $.each 循环完成后才更新。

在我的页面上，我有许多 div，当循环时，它们会应用橙色，当数据发布到服务器时，如果响应为 200，div 颜色将更改为绿色，否则将更改为红色.

脚本的问题是 dom 未更新，颜色始终为橙色/待处理。如果我删除那段代码，那么这些项目就会变成绿色/完成，但只有在每个 ajax 调用完成之后。

如何在每次 $.ajax 调用后更新 dom？谢谢

    $.each(csv_ids , function( i , val ) {

        $('#item_' + val).addClass('csv_pending_item_pending');

        $.ajax({
            url: '/foo' ,
            type: 'POST' ,
            async: false,
            data: { csvID : val } ,
            error : function() {
                console.log('error');
            },
            success: function(data) {

                $('#loop_upload_item').html(val);

                console.log(data)

                if(data.response == '200') {
                    $('#item_' + val).addClass('csv_pending_item_complete');
                    console.log('#item_' + val + ' good')
                }else{
                    $('#item_' + val).addClass('csv_pending_item_error');
                }

            }
        }); // ajax
    }); // each

Answer 1

只有当您的 JavaScript 停止执行时，浏览器才会重新绘制。因为您没有使用异步请求，所以它不会停止，并且重绘仅在所有请求完成后的最后发生。

如果您删除async: false，我希望它能够按照您的意愿工作。但是，正如您所说，您想要错开上传过程，您需要在上一个上传完成时触发下一个上传开始。

像下面这样的东西应该可以工作。您将看到我们查看每个 id 并创建一个函数来为该 id 进行上传。在 success 函数的末尾，我们调用链中的下一个函数。

var upload_func= function () { };
for(var val in csv_ids) {
    var next_func = upload_func;
    upload_func= function() {
        $('#item_' + val).addClass('csv_pending_item_pending');

        $.ajax({
            url: '/foo' ,
            type: 'POST',
            data: { csvID : val } ,
            error : function() {
                console.log('error');
            },
            success: function(data) {
                $('#loop_upload_item').html(val);

                console.log(data)

                if(data.response == '200') {
                    $('#item_' + val).addClass('csv_pending_item_complete');
                    console.log('#item_' + val + ' good')
                }else{
                     $('#item_' + val).addClass('csv_pending_item_error');
                }
                next_func();
            }
       }
    }
}

upload_func();