ajax 通话前未显示进度条？

Question

我想在第一个 ajax 调用启动之前实现进度条，并希望在第一个调用结束后关闭，然后我想再次启动第二次 ajax 调用的进度条，并希望在第二次 ajax 调用完成时关闭。

我试过了，但没有显示。它正在调用，同时由于 ajax 调用而关闭，我在这里不知道确切的时间 ajax 调用，我也不能使用 setTimeOut 来关闭。

这是代码。请帮助我实现这一目标。

var getResponseFromSOA = function(filterObject, file,verb, callback) {      
        createFilterString(filterObject, function(filterString) {// get the filter string
            if(jQuery) {// check the jQuery file is integrated or not
                var headers = {Authorization: COOKIES.readCookie("Authorization"),requestmode:"ACK_URL"};
                headers.isRender = file.isRender;
                if(file.inputDataHeaders)
                    headers.inputData = file.inputDataHeaders;


            // Here i want to show be ajax call
                  $progressBar.kendoProgressBarShow();


                    jQuery.ajax({
                        url: file.fileUrl + "/" + $securityComponent.cryptograghicFunctions.encryptor(filterString),
                        type: verb,
                        headers: headers,
                        async: false,
                    /*  beforeSend: function() {
                             $progressBar.kendoProgressBarShow();
                        },*/
                        error : function()
                        {
                            console.log("some error occured at getResponseFromSOA submitting the request");
                        },
                        success: function(responseDataFromRequestHandler) {                         
                            console.log(responseDataFromRequestHandler);                            
                            // again call because it is async mode form SOA team
                            jQuery.ajax({
                                url: responseDataFromRequestHandler.links[1].href,
                                async: false,
                                headers: {Authorization: COOKIES.readCookie("Authorization"),requestmode:"ACK_URL"},
                                success: function(responseDataFromResponseHandler) {
                                    try {
                                        console.log(responseDataFromResponseHandler);
                                        if(callback) callback(responseDataFromResponseHandler.data);

                                    }catch(e) {
                                        console.log(responseDataFromResponseHandler);
                                        // printing the error message in the console window
                                        console.log("Error in the callback in data-transactor-js > getResponseFromSOA"
                                                + "\n"
                                                + e.message);
                                    }
                                },                          
                                complete: function() {                               
                                     // Here i want to close the progressBar or last below it's commented mode
                                    $progressBar.kendoProgressBarHide();

                                }
                            });
                        },
                        complete: function() {                          
                             // Here i want to close the progressBar    or last below it's commented mode
                            $progressBar.kendoProgressBarHide();
                        }
                    });
                     // If it's not possible there then i want to close here.
                        //$progressBar.kendoProgressBarHide();


            } else throw {message: "jQuery is not defined or jQuery file is not linked"};
        });
    };

这是 Porgress API 代码。

$progressBar = {    
    kendoProgressBarShow : function() {
        if (jQuery) {
            kendo.ui.progress($("#progressBar"), true);
        } else {
            console.log("jQuery not found");
        }
    },
    kendoProgressBarHide : function() {
        if (jQuery) {
            kendo.ui.progress($("#progressBar"), false);
        } else {
            console.log("jQuery not found");
        }
    }
};

Answer 1

进行 ajax 调用和 async: false

时不显示进度条

UI冻结

因此尝试设置 async: true

或者您可以在下方找到解决方案link

https://codesave.wordpress.com/2013/09/25/ajax-call-freezes-ui-animation-locked-ui-during-ajax-call/

Answer 2

你可以在你的程序中尝试这种逻辑。

$('#clickfun').click(function() {
    $(this).after('<div id="loading">Loading...</div>');
    for(var i=0;i<5;i++){


    setTimeout(function() {
        $.ajax({
            url: '/echo/html/',
            type: 'post',
            async: false,
            data: {
                html: '<p>Hello Friends</p>'+i,

            },
            success: function(data) {
                console.log(data);
                $('#clickfun').after(data + i);
            },
            error: function() {
                alert('Error found');
            },
            complete: function() {
                $('#loading').remove();
            }
        });
    }, 0);
    }
});

ajax 通话前未显示进度条？

progress bar not showing before ajax call?

javascript

ajax

jquery

xmlhttprequest

kendo-ui