Bagaimanakah saya boleh mengulangi tatasusunan besar secara tidak segerak dalam JavaScript untuk mengekalkan responsif UI?

Mengulang Tatasusunan Secara Asynchronous untuk Mengekalkan Responsif UI

Apabila berurusan dengan tatasusunan yang besar, memanipulasinya dalam gelung berpotensi membekukan UI, menghalang interaksi pengguna dan memburukkan pengalaman pengguna. Untuk mengelakkan isu ini, terdapat beberapa teknik untuk digunakan:

Tanpa WebWorkers

Dalam senario di mana kod anda perlu berinteraksi dengan DOM, menggunakan WebWorkers tidak boleh dilaksanakan. Sebaliknya, pertimbangkan untuk memecahkan gelung anda kepada ketulan yang lebih kecil dan melaksanakannya mengikut urutan menggunakan pemasa seperti setTimeout(). Ini membolehkan enjin penyemak imbas memproses acara lain di antaranya, menghalang lokap UI.

Berikut ialah contoh fungsi yang menggunakan teknik ini:

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

Anda juga boleh mencipta versi generik yang menggunakan fungsi panggil balik:

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

Dengan WebWorkers

Untuk kod yang tidak berinteraksi dengan DOM, memanfaatkan WebWorkers ialah pendekatan yang berkesan. WebWorkers berjalan secara bebas daripada urutan UI utama, memastikan pemprosesan UI tidak terjejas. Walau bagaimanapun, ambil perhatian bahawa WebWorkers memerlukan kod JavaScript untuk dipisahkan ke dalam fail skrip yang berasingan.

Berikut ialah contoh mudah menggunakan 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>

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

Dengan menggunakan teknik ini, anda boleh mengulang tatasusunan yang besar tanpa menjejaskan responsif UI, memastikan pengalaman pengguna yang lancar dan interaktif.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mengulangi tatasusunan besar secara tidak segerak dalam JavaScript untuk mengekalkan responsif UI?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!