xhr“进度”侦听器仅被调用一次

Question

我正在尝试在AJAX调用中增加百分比，并且覆盖xhr并添加侦听器（用于上传和下载），但它们总是被调用一次，而且当我调用AJAX时它们也被正确调用（并在几秒钟后调用“ complete”回调，但事实并非如此，下载侦听器应仅在调用complete时才达到100％）

我不会在此AJAX调用中上传或下载大量数据，只是后端需要花费几秒钟的时间来从多个API中提取所有需要的数据，我想让用户知道其中有一项任务进度，并且网页没有卡住/超时...

这是我的代码：

$.ajax({
    ...
    ...
    ...
    complete: function(){
        console.log("complete");
    },
    xhr: function(){
        var xhr = new window.XMLHttpRequest();
        //Upload progress
        xhr.upload.addEventListener("progress", function(evt){
            var percentComplete = evt.loaded / evt.total;
            console.log(Math.round((percentComplete * 100) / 2) + "%");
        }, false);

        //Download progress
        xhr.upload.addEventListener("progress", function(evt){
            var percentComplete = evt.loaded / evt.total;
            console.log(Math.round((percentComplete * 100) / 2) + "%");
        }, false);
        return xhr;
    }
});