javascript function move to webworker

Question

I have function:

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

where are a lot of inputs to recheck... up to 50000. Usually are about 5000 to 20000 inputs. Of course browsers are freezing... How to move this function to web-worker and call it to get data back and fill form type="text"

thank you in advance.

Answer 1

Web workers don't have direct access to the DOM. So to do this, you'd need to gather the values of all 5-50k input s into an array or similar, and then send that to the web worker (via postMessage ) for processing, and have the web worker do the relevant processing and post the result back, and then use that result to update the input s. See any web worker tutorial for the details of launching the worker and passing messages back and forth (and/or see my answer here ).

Even just gathering up the values of the inputs and posting them to the web worker is going to take significant time on the main UI thread, though, as is accepting the result from the worker and updating the input s; even 5k input s is just far, far too many for a web page.

Answer 2

If maintaining browser responsiveness is the issue, then releasing the main thread periodically will allow the browser to process user input and DOM events. The key to this approach is to find ways to process the inputs in smaller batches. For example:

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

Here, we do just a little bit of work, then use setInterval to release the main thread so that other work can be performed. After INTERVAL we will do some more work, until we finish and call clearInterval