ajax调用之前没有显示进度条？答案

【问题标题】：progress bar not showing before ajax call?ajax调用之前没有显示进度条？
【发布时间】：2016-02-26 12:55:06
【问题描述】：

我想在第一个 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");
        }
    }
};

【问题讨论】：

标签： javascript jquery ajax kendo-ui xmlhttprequest

【解决方案1】：

当进行 ajax 调用和async: false 时，进度条不显示

界面冻结

因此尝试设置async: true

或者您可以在下面的链接中找到解决方案

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

【讨论】：

因此我们在另一个内部使用 2 个 ajax 调用。我们需要使用 aysnc: false 否则我们的函数 API 在从服务获取数据之前返回数据为空。
你也可以在 setTimeout 函数中编写你的 ajax 调用。答案中提供的链接中给出了解决方案

【解决方案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);
    }
});

【讨论】：