CODEWITHSUNDEEP
javascripthtmlgoogle-chromesafari
user11914177
user11914177

Reputation: 955

Updating HTML doesn't update website immediately in Chrome and Safari

I have two outputs in my HTML code like this:

Loaded: <output id="loaded"> 0 </output>
Requested: <output id="requested"> 0 </output>

They show the user how many files have been loaded and how many have been requested, so the user can estimate when the loading is finished. Inside Javascript I use this function to update the numbers:

function updateLoadNumbers() {
    document.getElementById("loaded").value = loadedObjects;
    document.getElementById("requested").value = requestedObjects;
}

The loadedObjects and requestedObjects are updated right, as printing them out in the console confirms. The problem is, that this works fine in Firefox, but Chrome and Safari don't show the updated numbers immediately, they only show, when all the files are loaded.

Each file gets loaded with this code:

function loadFileAsText(filename, callback) {
  var req = new XMLHttpRequest();
    req.open("GET", filename + "?antibuffer=" + Math.random(), false);
    req.onload = function() {
    if(req.status >= 200 && req.status < 300 || req.status == 0)
      callback(req.responseText);
    else
      console.error(req.statusText, req.responseText);
    };
    req.send();
}

Upvotes: 0

Views: 164

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074385

The problem is that you've made the ajax request synchronous:

req.open("GET", filename + "?antibuffer=" + Math.random(), false);
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^

That's essentially never the right thing to do. It locks the UI of most browsers, because it blocks the thread the JavaScript code and page painting both run on.

Leave that flag off so it defaults to true (an asynchronous request).

Upvotes: 1

Related Questions