Очередь и остановка распространения события click внутри div в Javascript

Question

Я пытаюсь реализовать «подождите 3 секунды, чтобы выполнить эту операцию» <div>.

Итак, у меня есть <div>, в котором есть набор элементов, которые я хочу, чтобы их можно было отключить, скажем, на 3 секунды (таймер или другое событие), но каким-то образом захватить события в очереди, а затем уволить их после истечения периода (или какого-либо события по моему выбору)?

Я думаю, что это проблема вроде того, как открыть модальное диалоговое окно, а потом ничего не нажимать. Правильно ли я думаю об этом?

Answer 1

Одна из возможностей - заставить обработчик кликов для вашего DIV реагировать на клики на его дочерних элементах, когда событие всплывает. Этот обработчик будет выполнять очереди, пока не истечет задержка. Вот грубый пример (для удобства используется обработка событий jQuery):

(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

Еще одна полезная вещь - это функция.

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

Итак, что-то вроде окружения всех элементов метода onclick вторым методом, который будет хранить этот вызов столько, сколько вам нужно.

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

Затем вы можете установить таймер в начале времени, чтобы изменить Div и выполнить все команды. Возможно, с помощью команды eval?

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*/
}

Надеюсь, это поможет

Answer 3

Дайте div функцию onclick, которая запускается в течение первых 3 секунд, просто удерживая массив вызовов с их событиями ... затем, после того, как ваш таймер на 3000 миллисекунд завершен, запустите функцию, которая изменяет щелчок div и позволяет вещи, которые будут отредактированы, и запускает массив событий.