HTML/CSS/Javascript：强制重绘 javascript function 中的元素，由 onclick 调用

Question

Fairly new to front end development and in need of some help.

I have a simple button that uses onclick to call a javascript function. This function queries a server for some data, and can often take a minute or two. I'd like to display a loading bar to indicate progress while the data is being prepared. The problem is that the HTML/CSS I'm inserting and changing via javascript is not rendering until after the entire javascript function has returned, which is no good if I need it to change while the function is doing things. Is there a way I can force a redraw of the element within the javascript function after I have inserted the html or changed the styling? Another question I have is if this is an inherent problem with using onclick. I have called javascript functions before by inserting a call in a element and this seems to work.

So far I have this a CSS file with the following progress bar styling information:

#progress-back {
  width: 100%;
  height: 30px;
  background-color: grey;
}

#progress-bar {
  width: 1%;
  height: 30px;
  background-color: green;
}

a button and div in my html:

<button type="button" onclick="loadData(form)">Load</button>
<div id="progress"></div>

then my javascript function:

function loadData(form){
    // Insert the progress bar elements.
    document.getElementById('progress').innerHTML = `
        <div id="progress-back">
            <div id="progress-bar"></div>
        </div>
    `
    for(var i = 0; i < nQueries; i++){
        // code that gets data and concats.
        // ...

        // move bar based on percent complete.
        moveBar(((i+1)/nQueries)*100)
    }
}

function moveBar(percent){
    document.getElementById("progress-bar").style.width = percent+"%"
}

I know the javascript function is being called because I'm getting the data, and by the end of it, the progress bar is there, 100% filled.

Cheers

Answer 1

Either your CSS is incorrect or your moveBar() function is not getting executed properly.

In your moveBar() comment out the code and put console.log( percent ) and see if it prints out the correct value.

If it is printing out the correct value then your CSS is wrong.

Reply to this answer what happens when you do the steps I listed above.

Answer 2

The problem was that I was using XMLHttpRequest and not running asynchronously. Cheers