Bagaimanakah anda boleh mengulangi tatasusunan besar tanpa menyekat utas UI?

Strategi Lelaran Tatasusunan Tidak Menyekat

Apabila melelaran pada tatasusunan yang besar, adalah penting untuk mengelak daripada menyekat urutan UI dan menjejaskan pengalaman pengguna. Artikel ini meneroka pelbagai strategi untuk mencapai lelaran tanpa sekatan tanpa menggunakan pekerja web dan dengan penggunaan pekerja web.

Tanpa Pekerja Web

Untuk kod yang perlu berinteraksi dengan DOM, penyelesaian biasa ialah memecahkan lelaran kepada ketulan yang lebih kecil dan memprosesnya secara tidak segerak menggunakan pemasa. Ini membolehkan penyemak imbas memproses acara lain, memastikan UI responsif.

<code class="javascript">function processLargeArray(array) {
  // Chunk size for processing
  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>

Secara bergantian, anda boleh menentukan fungsi yang lebih generik yang menerima fungsi panggil balik untuk memproses setiap elemen:

<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-- && index < array.length) {
      // Call the callback 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>

Untuk mengelakkan meneka saiz bahagian optimum, anda boleh menggunakan pendekatan berasaskan selang:

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

  function now() {
    return new Date().getTime();
  }

  function doChunk() {
    var startTime = now();
    while (index < array.length && (now() - startTime) <= maxTimePerChunk) {
      // Call the callback 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

Pekerja web menawarkan penyelesaian lain apabila lelaran kod tidak memerlukan akses DOM. Kod yang memakan masa dialihkan ke fail skrip yang berasingan dan dijalankan dalam urutan pekerja. Setelah selesai, pekerja boleh menyiarkan hasil kembali ke urutan utama tanpa menghalang pemprosesan acara.

Atas ialah kandungan terperinci Bagaimanakah anda boleh mengulangi tatasusunan besar tanpa menyekat utas UI?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!