Queuing and stop propogating a click event to inside a div in Javascript

Question

I'm trying to implement a "wait for 3 seconds to do this operation" <div>.

So, I have a <div> that has a bunch of elements in it that I want to be unclickable for say 3 seconds (a timer, or some other event), but somehow capture the events in a queue, and then fire them after the period (or some event of my choice) has elapsed/performed?

I'm thinking this is a problem kind of like putting up a modal dialog, and then not having anything beneath it clickable. Am I right in thinking this?

Thoughts / ideas?

Answer 1

Give the div an onclick function, which starts off for the first 3 seconds as just holding an array of calls with their events...then after your 3000 millisecond timer is done, run a function that changes the div's onclick, allows things to be edited, and runs the array of events.

Answer 2

Another thing that Ive found to be helpful is the function.

setTimeout("alert('hello')",1250);

So something along the lines of surrounding all of the elements onclick method with a second method that will store that call for as long as you need.

<div onclick=registerClick("normallyDoThis()")></div>

Then you can setup a timer at the beggining of the time to change the Div and execute all the commands. Possibly with the eval command?

setTimeout("changeTheDiv()", 3000);

function changeTheDiv()
{
/*eval() all the items in a list of onclicks youve been storing up */
/*Then go through and parse out the register() from all the onclick methods*/
}

I hope this helps

Answer 3

One possibility is to have the click handler for your DIV respond to clicks on its child elements as the event bubbles up. That handler would perform the queuing until the delay elapsed. Here's a rough example (using jQuery event handling for convenience):

(function() {
    var isReady = false, queue = [];

    setTimeout(function() {
        isReady = true;
        processQueue()
    }, 3000);

    $("#mainDiv").click(function(ev) {
        if (isReady) {
            //code to handle the click based on which child was clicked (ev.srcElement)
        } else {
            queue.push(ev.srcElement);
        }
    });

    function processQueue() {
        var i, elem;
        for (i = 0; elem = queue[i]; i++) {
            $(elem).click(); //re-trigger the click event
        }
        queue.length = 0;
    }
})();