Wie iteriere ich große Arrays in JavaScript, ohne die Benutzeroberfläche zu blockieren?

Asynchrones Iterieren großer Arrays ohne Blockierung der Benutzeroberfläche

Einführung

Das Iterieren über große Arrays in JavaScript kann insbesondere eine Herausforderung sein wenn die Benutzeroberfläche reaktionsfähig bleiben muss. Das Blockieren der Benutzeroberfläche kann zu einer schlechten Benutzererfahrung führen. In diesem Artikel werden verschiedene Ansätze zur Iteration über große Arrays untersucht, ohne die Benutzeroberfläche zu unterbrechen.

Ohne Web Worker

Bei der Arbeit mit Code, der auf das DOM zugreifen muss oder stark mit diesem interagiert Bei einem anderen App-Status können Web Worker nicht verwendet werden. Eine praktische Lösung besteht darin, die Iteration in kleinere Abschnitte aufzuteilen und diese auf einem Timer auszuführen. Dadurch kann der Browser andere Ereignisse zwischen Blöcken verarbeiten und dabei die Reaktionsfähigkeit der Benutzeroberfläche aufrechterhalten.

Der folgende Code demonstriert diesen Ansatz:

<code class="js">function processLargeArray(array) {
  // Customizable chunk size
  var chunk = 100;
  var index = 0;

  function doChunk() {
    var cnt = chunk;
    while (cnt-- && index < array.length) {
      // Process array[index] here
      ++index;
    }

    if (index < array.length) {
      // Set timeout for async iteration
      setTimeout(doChunk, 1);
    }
  }

  doChunk();
}</code>

Dieser Code kann weiter verallgemeinert werden, um eine Callback-Funktion ähnlich aufzurufen Array.forEach() mit anpassbarer Blockgröße:

<code class="js">function processLargeArrayAsync(array, fn, chunk, context) {
  // Customizable chunk size
  chunk = chunk || 100;
  var index = 0;

  function doChunk() {
    var cnt = chunk;
    while (cnt-- && index < array.length) {
      // Callback called with args (value, index, array)
      fn.call(context, array[index], index, array);
      ++index;
    }

    if (index < array.length) {
      // Set timeout for async iteration
      setTimeout(doChunk, 1);
    }
  }

  doChunk();
}</code>

Mit Web Worker

Wenn der Code keinen Zugriff auf das DOM benötigt, kann ein Web Worker dies tun genutzt. Ein Web Worker wird unabhängig vom Hauptthread ausgeführt und ermöglicht so die asynchrone Ausführung lang andauernder Aufgaben.

Zuerst muss der Code, der im Web Worker ausgeführt wird, in einem separaten Skript isoliert werden. Anschließend können die folgenden Schritte ausgeführt werden:

1. Erstellen Sie ein neues Web Worker-Objekt und geben Sie die URL des Skripts an:

   <code class="js">var webWorker = new Worker('worker.js');</code>

2. Behandeln Sie das vom Web Worker empfangene Nachrichtenereignis, wenn dieser seine Aufgabe abgeschlossen hat:

   <code class="js">webWorker.onmessage = function(e) {
     // Handle the result
   };</code>

3. Daten zur Verarbeitung an den Web Worker senden:

   <code class="js">webWorker.postMessage({ data: array });</code>

Das obige ist der detaillierte Inhalt vonWie iteriere ich große Arrays in JavaScript, ohne die Benutzeroberfläche zu blockieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!