[jQuery] jQuery and Javascript timer question

[jQuery] jQuery and Javascript timer question


What I'm trying to do is on click of a div spawn a
"timer" (setTimeout) which will run while the user is on the page, on
completion of the countedown of setTimeout, load a function to do a
submit. However in my testing the following code does not wait, and
submits the page event right away. Basically I want to be able to que
up the click events and then process them during an idle few seconds.
Check out my code below maybe you can help!
    <script type="text/javascript">
var pixelid = new Array();
var pixelcolors = new Array();
var processTimerId = 0;
var counter = 0;
\$('#result').click(function(e) {
    if ( \$(e.target).is('.btn px') )
    {
        var color = \$("input#color_code").val();
        \$(this).css({ backgroundColor:color });
        var id_select = \$(e.target).parent('div').attr('id');
        pixelid[counter] = id_select;
        pixelcolors[counter] = color;
        if (counter == 0)
        {
            //They have not clicked before, so we are ready to start the
process timer
            processTimerId = setTimeout (process_pixels(), 4000);
        }
        else
        {
            //They have clicked before, but apparently they clicked again, stop
the timer and we will restart it.
            clearTimeout( processTimerId );
            processTimerId = setTimeout (process_pixels(), 4000);
        }
        counter++;
    }
});
function process_pixels(){
    var process_counter = 0;
    while (process_counter <= counter)
    {
        \$("#result").load('/px_creator.pl', {colorselect: pixelcolors
[process_counter], id_select: pixelid[process_counter]});
        process_counter++;
    }
}
    </script>
Example: http://pixelated.hertzelle.com/draw.pl
Can anyone tell me why my timer process doesnt work as I would want it
to? I still have more work to go...But this has me a bit stuck. Any
help would make me very happy, thanks!