ThreadedLoop

HTML

<script src="http://github.com/sixtyseconds/ThreadedLoop/raw/master/Source/threadedloop.js"></script>
<h1>ThreadedLoop</h1>
<a href="#" id="create">Create Array</a>
<a href="#" id="inspect">Inspect Array</a>
<a href="#" id="pause">Pause Inspection</a>
<a href="#" id="resume">Resume Inspection</a>
<div id="status"></div>

CSS

body
{
    padding: 25px;
    font-family: arial, tahoma, verdana;
    font-size: 11px;
}
a
{
    padding: 5px;
}
div
{
    border: solid 2px #f0f0f0;
    background-color: #f5f5f5;
    margin: 5px 0px;
    padding: 5px;
}
h1
{
    margin: 0px;
    padding: 0px;
    font-size: 14px;
    font-weight: normal;
}

JavaScript

var buffer = [], inspect = false, status = document.id('status');

var create = new ThreadedLoop(5000, {
    'chunk': 100,
    'interval': 3,
    'onStart': function()
    {
        status.set('text', 'Creating test array...');
    },
    'onStop': function()
    {
        status.set('text', 'Test array created!');
    },
    'onProcess': function(i)
    {
        buffer.include('item ' + (i + 1) + ' at index ' + i);
    }
});

document.id('create').addEvent('click', function(e) {
    e.stop();
    create.start();
});

document.id('inspect').addEvent('click', function(e) {
    e.stop();

    inspect = new ThreadedLoop(buffer, {
        'onProcess': function(item, i)
        {
            status.set('text', 'array item: ' + item);
        }
    });

    /*inspect = buffer.loop({
        'onProcess': function(item, i)
        {
            status.set('text', 'array item: ' + item);
        }
    });*/

    inspect.start();
});

document.id('pause').addEvent('click', function(e) {
    e.stop();
    inspect.pause && inspect.pause();
});

document.id('resume').addEvent('click', function(e) {
    e.stop();
    inspect.resume && inspect.resume();
});