Bagaimana untuk Mengulang Tatasusunan Besar dalam JavaScript Tanpa Menyekat UI?

Menyalurkan Tatasusunan Besar Secara Tak Segerak Tanpa Menyekat UI

Pengenalan

Meletupkan tatasusunan besar dalam JavaScript boleh mencabar, terutamanya apabila UI perlu kekal responsif. Menyekat UI boleh mengakibatkan pengalaman pengguna yang buruk. Artikel ini meneroka pendekatan berbeza untuk mengulang tatasusunan besar tanpa mengganggu UI.

Tanpa Pekerja Web

Apabila bekerja dengan kod yang perlu mengakses DOM atau banyak berinteraksi dengan keadaan aplikasi lain, Pekerja Web tidak boleh digunakan. Penyelesaian praktikal adalah untuk memecahkan lelaran kepada ketulan yang lebih kecil dan melaksanakannya pada pemasa. Ini membolehkan penyemak imbas memproses acara lain antara ketulan, mengekalkan responsif UI.

Kod berikut menunjukkan pendekatan ini:

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

Kod ini boleh digeneralisasikan lagi untuk memanggil fungsi panggil balik yang serupa dengan Array.forEach() dengan saiz bongkah yang boleh disesuaikan:

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

Dengan Pekerja Web

Jika kod tidak perlu mengakses DOM, Pekerja Web boleh dimanfaatkan. Pekerja Web berjalan secara bebas daripada utas utama, membenarkannya melaksanakan tugas yang berjalan lama secara tak segerak.

Pertama, kod yang akan dijalankan dalam Pekerja Web perlu diasingkan dalam skrip berasingan. Kemudian, langkah berikut boleh diambil:

1. Buat objek Web Worker baharu dan nyatakan URL skrip:

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

2. Kendalikan acara mesej yang diterima daripada Pekerja Web apabila ia telah menyelesaikan tugasnya:

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

3. Hantar data kepada Pekerja Web untuk diproses:

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

Atas ialah kandungan terperinci Bagaimana untuk Mengulang Tatasusunan Besar dalam JavaScript Tanpa Menyekat UI?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!