Ist es möglich, "thread" Javascript-und halten Zugriff auf das UI?

Möchte ich den thread etwas Javascript-code, während beide die wichtigsten Prozess-und thread frei zum aktualisieren der browser-Benutzeroberfläche.

Beispiel:

function StartStuff() {
    StartThreadedCode();
    //do more work and update the UI while StartThreadedCode() does its work
}

function StartThreadedCode() {
    //do stuff (do work and update the UI)
}

Ist es möglich?

InformationsquelleAutor TERACytE | 2011-10-26
  1. 17

    Gibt es zwei Möglichkeiten, das zu erreichen "multithreading" in Javascript. Die erste Möglichkeit ist ein cross-browser-Lösung, das funktioniert auch in älteren Browsern, aber ist komplizierter zu implementieren.

    Die Idee dahinter ist, dass Sie die UI-Aktualisierung einige Zeit jeder einmal in eine Weile. Da es keine synchrone sleep-Funktion in Javascript, der einzige Weg dies zu erreichen ist die Verwendung von setTimeout (oder setInterval mit ein wenig mehr erschweren logic) zum verzögern der Ausführung jedes loop für komplexe Berechnungen. Dies würde der browser etwas Zeit zum aktualisieren der Benutzeroberfläche zwischen Schleifen, so dass die optische Wirkung der mehrere Dinge gleichzeitig passieren. Ein paar ms sollte mehr als genug für die Benutzeroberfläche, um die neuesten änderungen widerzuspiegeln.

    Es hat seine Nachteile, natürlich, und kann ziemlich schwierig zu implementieren, wenn es mehrere Aktionen, die der Benutzer machen möchte, während der hintergrund Berechnungen durchgeführt werden. Es kann auch drastisch verlangsamen die gesamte hintergrundberechnung, da es verzögert sich ein paar ms jetzt und dann. In bestimmten Fällen, jedoch, es funktioniert der trick und funktioniert gut.

    Die zweite Möglichkeit wäre die Verwendung von web-worker, die im Grunde Javascript-Skripten läuft unabhängig im hintergrund, die sich wie ein Roter Faden. Es ist viel einfacher zu implementieren, müssen Sie nur sorgen über das messaging zwischen Haupt-code und hintergrund Arbeitnehmer, so dass Ihre gesamte Anwendung ist nicht so stark betroffen. Lesen Sie über die Verwendung der Ihnen aus dem link gepostet von Mic https://developer.mozilla.org/en/Using_web_workers. Der größte Nachteil von web-worker ist Ihre Unterstützung von den Browsern, die man am http://caniuse.com/#search=worker Es ist nicht möglich, workaround für IE <9-oder mobile-Browser, die wirklich simulieren die Wirkung, so dass es nicht viel Sie tun können, über diesen Browsern, aber dann wieder, die Vorteile der modernen Browser werden möglicherweise überwiegen Armen IE-Unterstützung. Dies ist natürlich abhängig von Ihrer Anwendung.

    Edit: Im nicht sicher, ob ich erläutert das erste Konzept, das deutlich genug, also beschloss ich, fügen Sie ein kleines Beispiel. Der folgende code ist funktional äquivalent zu:

    for (var counter = 0; counter < 10; counter++) {
  console.log(counter);
}

    Aber anstelle der Protokollierung 0-9 in schneller Folge, es verzögert 1s vor der Ausführung der nächsten iteration der Schleife.

    var counter = 0;

//A single iteration of your calculation function
//log the current value of counter as an example
//then wait before doing the next iteration
function printCounter() {
  console.log(counter);
  counter++;
  if (counter < 10)
    setTimeout(printCounter, 1000);
}

//Start the loop
printCounter();
    InformationsquelleAutor zatatatata
  2. 1

    Als 2009 (FF 3.5/Gecko 1.9.1) eine neue Web-API wurde Hinzugefügt, die aufgerufen wird,Web-Worker. Es funktioniert auch auf Chrome 4+, Opera 10.6+ und IE10+.

    Hat der Arbeitnehmer grundsätzlich einen hintergrund-thread, der in einem separaten Prozess ausgeführt.

    Die Kommunikation zwischen der master-Prozess (zB. Ihre UI-Hauptthread) und die slave-Prozess (der hintergrund-thread, der Arbeiter) gegründet, die mit Hilfe eines generischen PostMessage/onmessage-Funktion, wo Sie austauschen können, was auch immer Daten, die Sie gerne zwischen den beiden Parteien.

    Ist es erwähnenswert, dass jeder einzelne Arbeitnehmer zugeordnet ist, zu einem anderen Kern. Zum Beispiel durch die Schaffung von 4 verschiedenen Arbeiter, die eine lang andauernde Berechnung) auf einem quad-Prozessor, den Sie gehen, um zu sehen alle 4 CPU-Kerne wie 100%, während das main-Skript ist noch im Standgas und reagiert damit auf die UI-events (Blick auf dieses Beispiel).

    Ein einfaches Beispiel:

    main-script.js

    if ("function" !== typeof window.Worker) {
  throw "Your browser doesn't support Web Workers";
}
var thread = new Worker("background-thread.js");
thread.onmessage = function(e) {
  console.log("[A] : I received a " + e.data + " :-P");
};
thread.onerror = function(e) {
  console.log(e);
};

console.log("[A] : I'm sending a PING :-)");
thread.postMessage("PING");

    background-thread.js

    onmessage = function(e) {
  console.log("[B] : I receveid a " + e.data + " :-)");
  console.log("[B] : I will respond with a PONG ;-)");
  postMessage("PONG");
};

    Sollte das obige Beispiel ergibt die folgende Ausgabe im browser-Konsole:

    [A] : ich werde senden Sie ein PING 🙂

    [B] : ich receveid ein PING 🙂

    [B] : ich antwortet mit einem PONG 😉

    [A] : erhielt ich einen PONG 😛

    So glücklich PING-ing, um Ihre hintergrund-Skript!

    InformationsquelleAutor Eugen Mihailescu
Schreibe einen Kommentar