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输入。当然浏览器正在冻结...如何将此功能移动到web-worker并调用它来获取数据并填写表单类型=“text”

提前谢谢。

Answer 1

Web worker无法直接访问DOM。为此，您需要将所有5-50k input的值收集到一个数组或类似的数组中，然后将其发送给Web worker（通过postMessage）进行处理，并且让Web工作人员进行相关处理并将结果发回，然后使用该结果更新input。有关启动worker和来回传递消息（和/或参见my answer here）的详细信息，请参阅任何Web worker教程。

即使只是收集输入的值并将它们发布到Web worker，也会占用主UI线程的大量时间，因为接受来自worker的结果并更新input s ;甚至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

javascript函数转移到webworker

2 个答案: