UI를 차단하지 않고 JavaScript에서 대규모 배열을 반복하는 방법은 무엇입니까?

UI를 차단하지 않고 대규모 배열을 비동기식으로 반복

소개

JavaScript에서 대규모 배열을 반복하는 것은 특히 어려울 수 있습니다. UI가 응답성을 유지해야 하는 경우. UI를 차단하면 사용자 경험이 저하될 수 있습니다. 이 기사에서는 UI를 중단하지 않고 대규모 배열을 반복하는 다양한 접근 방식을 살펴봅니다.

웹 작업자 없이

DOM에 액세스해야 하거나 DOM과 많이 상호 작용하는 코드로 작업할 때 다른 앱 상태에서는 Web Worker를 사용할 수 없습니다. 실용적인 해결책은 반복을 더 작은 덩어리로 나누고 타이머에서 실행하는 것입니다. 이를 통해 브라우저는 UI 응답성을 유지하면서 청크 사이의 다른 이벤트를 처리할 수 있습니다.

다음 코드는 이 접근 방식을 보여줍니다.

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

이 코드는 다음과 유사한 콜백 함수를 호출하도록 더 일반화될 수 있습니다. 사용자 정의 가능한 청크 크기를 갖는 Array.forEach():

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

웹 작업자 사용

코드가 DOM에 액세스할 필요가 없는 경우 웹 작업자는 다음과 같을 수 있습니다. 활용. Web Worker는 메인 스레드와 독립적으로 실행되므로 장기 실행 작업을 비동기식으로 실행할 수 있습니다.

먼저 Web Worker에서 실행될 코드를 별도의 스크립트로 격리해야 합니다. 그런 다음 다음 단계를 수행할 수 있습니다.

1. 새 Web Worker 개체를 생성하고 스크립트의 URL을 지정합니다.

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

2. 작업이 완료되면 웹 작업자로부터 받은 메시지 이벤트를 처리합니다.

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

3. 처리를 위해 웹 작업자에게 데이터 보내기:

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

위 내용은 UI를 차단하지 않고 JavaScript에서 대규모 배열을 반복하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!