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!
