How to wait untill for (append) finished and then show result javascirpt / jquery

Question

I have a function that renders 5 images, and pagination. This function used ajax for getting data.
It works well, but when I using the pagination, I can see the process of 'creating' HTML.

I want to add a loading.gif, until all the HTML finished loading, and show all the results

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);
        }
    });
}

I saw tutorials about promises and callbacks, but I'm not good at it and I don't know how to rewrite my code for those. Is there another way to solve the issue ?

solution: It may come in handy for other:

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

You can do like this i am not sure about but it will help you

  function getImages(init, buttonPaging) {
                var data = {};
                if (init) {
                    data["int"] = "1";
                } else {
                    data["int"] = $(buttonPaging).text();
                }
   let promise = new Promise(function(resolve, reject) {
     //add your code for add loading.gif
            $.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);
                        }
    resolve(); 
                    } else {
                        errors += data.error;
    resolve(); 
                    }
                },
                error: function () {
                    errors += 'Please contact with administrator - img list at edit product';
                    alert(errors);
    resolve(); 
                }
            });
    }
promise.then(
  result => alert("done"), // remove loading.gif

);
        }

Answer 2

have a class for show loading image icon and place it in the block itself and hide it once completed. have a look at the below sample. it may helpful to you.

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');        
}

otherwise you can have a loader div block show the block on beforesend() and hide it in success / complete.