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