javascript - 如何等到(追加)完成然后显示结果javascript/jquery

Question

我有一个渲染 5 张图像和分页的功能。此函数使用ajax获取数据。
它运行良好，但是当我使用分页时，我可以看到“创建”HTML 的过程。

我想添加一个loading.gif，直到所有HTML加载完毕，并显示所有结果

function getImages(init, buttonPaging) {
    var data = {};
    if (init) {
        data["int"] = "1";
    } else {
        data["int"] = $(buttonPaging).text();
    }

    $.ajax({
        type: "POST",
        url: '@Url.Action("GetImages", "Image")',
        data: JSON.stringify(data),
        beforeSend: function (xhr) {
            xhr.setRequestHeader("XSRF-TOKEN", $('input:hidden[name="__RequestVerificationToken"]').val());
        },
        contentType: "application/json",
        dataType: "json",
        success: function (data) {
            if (data.success) {
                $('#imgList').children().remove();
                for (var i = 0; i < data.imageList.length; i++) {
                    (function (img) {
                        $('#imgList').append(drawList(img, data.baseUrl));
                    })(data.imageList[i]);
                }
                $('#pagingList').children().remove();
                for (var i = 0; i < data.pagingInfo.totalPages; i++) {
                    (function (paging) {
                        var isCurrentPage = false,
                            index = i;

                        index++;
                        if (paging.currentPage == index) {
                            isCurrentPage = true;
                        }
                        $('#pagingList').append(drawPaging(index, isCurrentPage));
                    })(data.pagingInfo);
                }
            } else {
                errors += data.error;
            }
        },
        error: function () {
            errors += 'Please contact with administrator - img list at edit product';
            alert(errors);
        }
    });
}

我看过有关 promise 和回调的教程，但我并不擅长，而且我不知道如何为这些重写我的代码。还有其他方法可以解决这个问题吗？

解决方案:其他人可能会派上用场:

function hideLoader() { setTimeout(function () { $('.loader-sm').hide(); }, 750); }
function showLoader() { $('.loader-sm').show(); }
function hideList() { $('#imgList').hide(); }
function showList() { setTimeout(function () { $('#imgList').show(200); }, 750); }

success: function () {
                    if (data.success) {
                        //do something   
                    } else {
                        showList();
                        hideLoader();
                    }
                },
                error: function () {
                    showList();
                    hideLoader();
                },
                complete: function () {
                    showList();
                    hideLoader();
                }

Answer 1

有一个用于显示加载图像图标的类，并将其放置在 block 本身中，并在完成后将其隐藏。看看下面的示例。它可能对你有帮助。

beforeSend: function() {
    $('#imgList').addClass('loading');        
},
success: function(data) {
    $("#imgList").removeClass('loading');        
},
error: function(xhr) { // if error occured
   $("#imgList").removeClass('loading');
},
complete: function() {       
   $("#imgList").removeClass('loading');        
}

否则你可以让一个加载器 div block 在 beforesend() 上显示该 block 并在成功/完成时隐藏它。