Queuing and stop propagating 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?

Answer 1

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;
    }
})();

Answer 2

给div一个onclick函数，该函数在开始的3秒钟内就开始，只是保留一系列带有事件的调用...然后在3000毫秒计时器完成后，运行一个可更改div的onclick的函数，编辑并运行事件数组。

Answer 3

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