затяжной 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, браузер имеет право игнорировать старую страницу, т.к. с его точки зрения она уже в мусоре.