Wie kann ich in JavaScript asynchron über große Arrays iterieren, um die Reaktionsfähigkeit der Benutzeroberfläche zu erhalten?

Arrays asynchron iterieren, um die Reaktionsfähigkeit der Benutzeroberfläche zu erhalten

Beim Umgang mit großen Arrays kann deren Manipulation innerhalb von Schleifen möglicherweise die Benutzeroberfläche einfrieren, die Benutzerinteraktion behindern und die Benutzererfahrung verschlechtern. Um dieses Problem zu vermeiden, gibt es mehrere Techniken:

Ohne WebWorker

In Szenarien, in denen Ihr Code mit dem DOM interagieren muss, ist die Verwendung von WebWorkern nicht möglich. Erwägen Sie stattdessen, Ihre Schleife in kleinere Abschnitte aufzuteilen und diese nacheinander mit einem Timer wie setTimeout() auszuführen. Dadurch kann die Browser-Engine zwischendurch andere Ereignisse verarbeiten und so ein Absturz der Benutzeroberfläche verhindern.

Hier ist ein Beispiel für eine Funktion, die diese Technik verwendet:

<code class="javascript">function processLargeArray(array) {
  // Set the chunk size to determine how many items to process at once.
  var chunk = 100;
  var index = 0;

  function doChunk() {
    var cnt = chunk;
    while (cnt-- &amp;&amp; index < array.length) {
      // Process array[index] here.
      ++index;
    }
    if (index < array.length) {
      // Set a timeout to continue processing asynchronously.
      setTimeout(doChunk, 1);
    }
  }
  
  doChunk();
}</code>

Sie können auch eine generische Version davon erstellen ruft eine Rückruffunktion auf:

<code class="javascript">function processLargeArrayAsync(array, fn, chunk, context) {
  context = context || window;
  chunk = chunk || 100;
  var index = 0;

  function doChunk() {
    var cnt = chunk;
    while (cnt-- &amp;&amp; index < array.length) {
      // Call the callback with args (value, index, array).
      fn.call(context, array[index], index, array);
      ++index;
    }
    if (index < array.length) {
      // Set a timeout for continued async processing.
      setTimeout(doChunk, 1);
    }
  }

  doChunk();
}</code>

Mit WebWorkers

Für Code, der nicht mit dem DOM interagiert, Die Nutzung von WebWorkers ist ein effektiver Ansatz. WebWorker werden unabhängig vom Haupt-UI-Thread ausgeführt und stellen so sicher, dass die UI-Verarbeitung nicht beeinträchtigt wird. Beachten Sie jedoch, dass WebWorker die Trennung von JavaScript-Code in eine separate Skriptdatei erfordern.

Hier ist ein einfaches Beispiel für die Verwendung eines WebWorkers:

<code class="javascript">// Create a new WebWorker.
var worker = new Worker('worker.js');

// Send data to the worker.
worker.postMessage(array);

// Listen for messages from the worker.
worker.addEventListener('message', function(e) {
  // Process the results returned from the worker.
});</code>

In der Datei worker.js:

<code class="javascript">// Receive data from the main thread.
self.addEventListener('message', function(e) {
  var array = e.data;

  // Process the array in the web worker.

  // Send the results back to the main thread.
  self.postMessage(results);
});</code>

Durch den Einsatz dieser Techniken können Sie über große Arrays iterieren, ohne die Reaktionsfähigkeit der Benutzeroberfläche zu beeinträchtigen, und so einen reibungslosen und interaktiven Benutzer gewährleisten Erfahrung.

Das obige ist der detaillierte Inhalt vonWie kann ich in JavaScript asynchron über große Arrays iterieren, um die Reaktionsfähigkeit der Benutzeroberfläche zu erhalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!