Индикатор выполнения Ajax, пока моя функция успеха не будет завершена

Question

Я использую индикатор выполнения ajax, я хочу, чтобы прогресс не достигал 100%, пока моя функция успеха ajax не будет завершена.

    $.ajax({

        data: //data,
        type: 'post',
        url: url,
        xhr: function() {
            var xhr = $.ajaxSettings.xhr();
            xhr.upload.onprogress = function(e) {
            var elem = document.getElementById("myBar");
                var width = 10;
                var id = setInterval(frame, 10);
            function frame() {
                if (width >= 100) {
                   clearInterval(id);
                } 
                            else {
                   width++; 
                   elem.style.width = width + '%'; 
                   elem.innerHTML = width * 1  + '%';                               
                    }
                   }
         return xhr;
},
success: // code
        };

Мой индикатор выполнения ajax показывает 100%, но все еще ждет, покаУспешная функция закончена.Итак, я ищу, чтобы мой индикатор выполнения не достигал 100%, пока не будет выполнена моя функция успеха.

Answer 1

Попробуйте, как показано ниже, так что это будет 100% только когда закончите.

HTML

<progress></progress>

Код jQuery

$.ajax({
        url: url,
        type: 'POST',
        enctype: 'multipart/form-data',
        //Form data
        data: new FormData($('#fileupload-form')[0]), // Data sent to server, a set of key/value pairs representing form fields and values
        // Tell jQuery not to process data or worry about content-type
        // You *must* include these options!
        cache: false, // To unable request pages to be cached
        contentType: false, // The content type used when sending data to the server. Default is: "application/x-www-form-urlencoded"
        processData: false, // To send DOMDocument or non processed data file it is set to false (i.e. data should not be in the form of string)
        //Custom XMLHttpRequest
        xhr: function(){
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                // For handling the progress of the upload
                myXhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        $('progress').attr({
                            value: e.loaded,
                            max: e.total,
                        });
                    }
                } , false);
            }
            return myXhr;
        },
        success: function(res){

        }
    });