每次ajax调用后添加进度条？

Question

我想在每次ajax调用后添加进度条。实际上我的代码与firefox一起工作正常，但没有使用chrome。我尝试了一些解决方案，但它没有用。我也尝试改变async = false但没有用。

我的进度条HTML：

<div id="myModal" class="modal">
            <div class="modalContent">
                <span id="progressPer">0%</span><br />
                <div id="progress">
                    <div id="progressBar"></div>
                </div>
                <span id="progressMsg">Waiting for...</span>
                <input type="button" class="closeButton" value="Go Back" onclick="return closeProgressBar()" />
            </div>
</div>

这就是我使用本机JS和Jquery使用此进度条的方式：

var modal = document.getElementById('myModal');
var btn = document.getElementById("btn");
var prgBar = document.getElementById("progressBar");
var prgPer = document.getElementById("progressPer");
var prgMsg = document.getElementById("progressMsg");
var prg = document.getElementById("progress");
var prgCloseBtn = document.getElementsByClassName("closeButton")[0];

console.log(modal);
    modal.style.display = "block";

    prg.style.display = "block";

    prgBar.style.width = "0%";
    prgPer.innerHTML = "0%";
    console.log("0% Completed...");
    prgMsg.innerHTML = "Preparing...";

var chkspammsg = checkforspam(); //This function will make an ajax call

if(chkspammsg == 1) {
prgBar.style.width = "20%";
        prgPer.innerHTML = "20%";
        console.log("20% completed...");
        prgMsg.innerHTML = "Checking for Spam";
        console.log("\n\nInside check_save --> check_spf Return --> " + ret);

}

var chkerr = checkforerror(); //This function will make another ajax call and returns value.

prgBar.style.width = "40%";
    prgPer.innerHTML = "40%";
    console.log("40% Completed...");
    prgMsg.innerHTML = "checking for errors";

等等......