затяжной ajax XMLHttpRequest

[alex_ural]

Привет всем.
У меня request

$('#installForm').on('beforeSubmit', function (event){
    event.preventDefault();
    $('#submitButton').prop('disabled', true);
    $('#back-button').hide();
    $('#install-note').toggle();
    $('.performance-svg').toggle('slow');

    var progressBar =$('.progress-bar');

     function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
   async function prBarTimer(t, p) {
        if(p>t) {
            for(let t=1; t < p; t++){
              await sleep(500);
              setPercent(t);
            }            
        }
        function setPercent(t) {
            progressBar.css('width', t+'%' );
            progressBar.text(parseInt(t)+'%' );
        }
    } 
    
    var formData =  $('#installForm').serialize();
    var xmlReq = $.ajax({
           type: "POST",
           url: "{$url}",
           xhr: function() {
           var xhr = new window.XMLHttpRequest();
           
            xhr.onreadystatechange = function(){
                if (xhr.readyState == 1) {
                    $('.progress').toggle();
                    prBarTimer(0, 80);
                }
            };
            xhr.onloadend =function(e) {
                   prBarTimer(80, 100);
                   location.href="{$url_upgrate}"
            }
            return  xhr;
        }
    });
});

Я ожидаю, что onloadend запустится prBarTimer(80, 100); Но на самом деле срабатывает location.href. Cкажите пожалуйста, почему так?

[Aetae]

Ну потому что ты не ждёшь (await) prBarTimer, location.href устанавливается практически одновременно. А когда установлена новая location.href, браузер имеет право игнорировать старую страницу, т.к. с его точки зрения она уже в мусоре.

[lunahart6374]

So basically, the issue is that onloadend fires, both functions run, but the browser immediately jumps to location.href before prBarTimer(80, 100) has any chance to finish, right? orbit beats
Since prBarTimer is async and I'm not awaiting it, the redirect happens instantly, and the browser doesn't bother rendering the progress animation because it’s already navigating away.