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輸入。 當然，瀏覽器會凍結...如何將此功能移至網絡工作者並調用它以取回數據並填寫表格type =“ text”

先感謝您。

Answer 1

Web工作者沒有直接訪問DOM的權限。 因此，要做到這一點，您需要將所有5-50k input的值收集到一個數組或類似的數組中，然后將其發送給Web Worker（通過postMessage ）進行處理，然后讓Web Worker進行相關處理。並將結果發回，然后使用該結果更新input s。 有關啟動工作程序以及來回傳遞消息的詳細信息，請參閱任何Web工作程序教程（和/或在此處查看我的答案 ）。

但是，即使只是收集輸入值並將其發布到Web Worker上，也要在主UI線程上花費大量時間，就像接受來自worker的結果並更新input s一樣。 甚至5k input s對於網頁來說也遠遠不夠。

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