JavaScript Ereignisse während der Laufzeit (Fortschrittsanzeige)

[lordg2009]

Hi,

meine Javascript führt mehrere 100 AJAX anfragen durch (synchron), deren Bearbeitung ca. eine halbe Sekunde dauert. Zwischendrin wollte ich den Fortschritt auf der Website darstellen.
console.log funktioniert wunderbar, aber wenn ich per getElementById einen Tag verändern möchte, passiert die erst, wenn das Script komplett durchgelaufen ist. Kann man dieses Verhalten ändern?

Vielen Dank für eure Hilfe

 

[askling]

Ja, es darf eben nicht alles synchron sein damit der Browser zum repaint dazwischen kommt und damit 'non-blocking' ist, um das beliebte buzzword zu nennen.

In rein synchronen Sprachen bräuchtest du hier Threads um nicht die UI zu blocken, bei JS geht das eben über asynchrone Ausführung.

Wenn dennoch eine konkrete Reihenfolge im Ablauf wichtig ist, brauchst du zusätzlich Promises. Mit denen kannst du trotz asynchroner Ausführung einen "normalen wenn dann" ablauf erreichen.

 

[Bagbag]

Poste mal den (relevanten) Code, dann kann man dir besser helfen.

Ansonsten etwas wie:

const urls = [
  {
    url: 'http://url1.tld',
    callback: (data) => console.log(data)
  },
  {
    url: 'http://url2.tld',
    callback: (data) => console.log(data)
  },
];

function fetchURLs(urls, progressCallback, index = 0) {
  var request = new XMLHttpRequest();
  request.open("GET", urls[index].url, true);
  request.responseType = 'text';

  request.onload = () => {
    if (request.status === 200) {
      urls[index].callback(request.response);
      progressCallback(index / urls.length);
    }
  };
  
  request.send('');

  if (++index < urls.length) {
    fetchURLs(urls, progressCallback, index);
  }
}

fetchURLs(urls, (progress) => {
  //update UI with progress
});

Wenn du Transpiler wie Babel oder Typescript nutzt oder du nur die aktuellsten Browser unterstützen willst, kann man das ganze auch noch mittels async/await viel schöner machen.