Prevent "Stop Running Script" When Loading Large Amounts Of Data

I'm currently running 2 for-loops, going through 2 arrays of objects and creating a new array with the objects which occur in both lists. When the lists become to large, I get a 'S

Solution 1:

You can chunk the array processing, see the following link:

I wrote a prototype class around it and it solved my problem regarding this:

/**
 * provides UI update while using large arrays without blocking
 * found core idea on http://www.mattsnider.com/javascript/handle-slow-processes-without-blocking-the-ui/
 */
var ChunkedArray = Class.create(Enumerable, {
    initialize: function(options) {
        this.array = new Array();
        this.options = Object.extend({
            chunkSize: 20,
            interval: 10
        }, options || {})
    },

    push: function(obj) {
        this.array.push(obj)
    },

    chunk: function(array, index, length, iterator, context) {
        var j, l = array.length;
        for (j = (index + length); (index < j && index < l); index += 1) {
            iterator.call(context, array[index], index);
        }

        if (l > index) {
            setTimeout(function() {
                this.chunk(array, index, length, iterator, context);
            }.bind(this), this.options.interval);
        }
    },

    _each: function(iterator, context) {
        this.chunk(this.array, 0,
                this.options.chunkSize, iterator, context);
    },

    toString: function() {
        return this.array.toString();
    }
});