javascript函數舉動webworker

Question

我有功能：

function addModel() { 

    var values = new Array(); 
    var $input = $('input[type=\'text\']'); 
    var error = 0; 
    $input.each(function() { 
     $(this).removeClass('double-error'); 
     var that = this; 
     if (that.value!='') { 
      values[that.value] = 0; 
      $('input[type=\'text\']').each(function() { 
       if (this.value == that.value) { 
        values[that.value]++; 
       } 
      }); 
     } 
    }); 

    $input.each(function(key) { 
     if (values[this.value]>1) { 
      //error++; 
     var name = this.value; 
     var product_model = $(this).parent().parent().find('.product-model').text(); 
     var m = product_model.toLowerCase().areplace(search,replace); 
    $(this).parent().find('input[type=\'text\']').val(name + '-' + m); 

     } 

    }); 


    return error <= 0; //return error > 0 ? false : true; 
} 

那裏有很多的投入，以複檢......多達50000通常是約5000至20000輸入。當然，瀏覽器正在凍結...如何將此功能移動到網絡工作者，並稱之爲獲取數據和填寫表單類型=「文本」

謝謝你提前。

Answer 1

Web工作人員無法直接訪問DOM。所以要做到這一點，您需要將所有5-50k input的值收集到數組或類似數據中，然後將其發送給網絡工作人員（通過postMessage）進行處理，並讓網絡工作人員進行相關處理並將結果發回，然後使用該結果更新input。請參閱任何Web工作人員教程以瞭解啓動工作人員和傳遞消息的細節（和/或參見my answer here）。

即使只是收集輸入值並將它們發佈到Web工作人員，也要在主UI線程上花費大量時間，正如接受工作人員的結果並更新input;即使是5k input也只是很遠，對於一個網頁來說太多了。

Answer 2

如果維護瀏覽器響應速度是個問題，那麼定期釋放主線程將允許瀏覽器處理用戶輸入和DOM事件。這種方法的關鍵在於設法以較小的批次處理輸入。例如：

var INTERVAL = 10; // ms 
var intervalId = setInterval((function() { 
    var values = []; 
    var $input = $('input[type=\'text\']'); 
    var index; 
    return function() { 
    var $i = $input[index]; 
    var el = $i.get(); 
    $i.removeClass('double-error'); 
    if (el.value != '') { 
     values[el.value] = 0; 
     $input.each(function() { 
     if (this.value == el.value) { 
      values[el.value]++; 
     } 
     }); 
    } 
    if (index++ > $input.length) { 
     clearInterval(intervalId); 
     index = 0; 

     // Now set elements 
     intervalId = setInterval(function() { 
     var $i = $input[index]; 
     var el = $i.get(); 
     if (values[el.value] > 1) { 
      var name = el.value; 
      var product_model = $i.parent().parent().find('.product-model').text(); 
      var m = product_model.toLowerCase().areplace(search,replace); 
      $i.parent().find('input[type=\'text\']').val(name + '-' + m); 
     } 
     if (index++ > $input.length) { 
      clearInterval(intervalId); 
     } 
     }, INTERVAL); 
    } 
    }; 
}()), INTERVAL); 

在這裏，我們做的工作只是一點點，然後用setInterval釋放主線程，以便其他工作可以進行。在INTERVAL之後，我們將完成一些工作，直到完成並致電clearInterval