Comment puis-je parcourir de grands tableaux de manière asynchrone en JavaScript pour préserver la réactivité de l'interface utilisateur ?

Itérer les tableaux de manière asynchrone pour préserver la réactivité de l'interface utilisateur

Lorsque vous traitez de grands tableaux, leur manipulation dans des boucles peut potentiellement geler l'interface utilisateur, entravant l'interaction de l'utilisateur et détériorant l'expérience utilisateur. Pour éviter ce problème, il existe plusieurs techniques à utiliser :

Sans WebWorkers

Dans les scénarios où votre code doit interagir avec le DOM, l'utilisation de WebWorkers n'est pas réalisable. Au lieu de cela, envisagez de diviser votre boucle en morceaux plus petits et de les exécuter dans l'ordre à l'aide d'un minuteur tel que setTimeout(). Cela permet au moteur du navigateur de traiter d'autres événements entre les deux, évitant ainsi les blocages de l'interface utilisateur.

Voici un exemple de fonction qui utilise cette technique :

<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>

Vous pouvez également créer une version générique qui invoque une fonction de rappel :

<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>

Avec WebWorkers

Pour le code qui n'interagit pas avec le DOM, exploiter WebWorkers est une approche efficace. Les WebWorkers s'exécutent indépendamment du thread principal de l'interface utilisateur, garantissant ainsi que le traitement de l'interface utilisateur n'est pas affecté. Cependant, notez que les WebWorkers nécessitent que le code JavaScript soit séparé dans un fichier de script distinct.

Voici un exemple simple d'utilisation d'un WebWorker :

<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>

Dans le fichier 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>

En employant ces techniques, vous pouvez parcourir de grands tableaux sans compromettre la réactivité de l'interface utilisateur, garantissant ainsi une expérience utilisateur fluide et interactive.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!