1. Главная
  2. Блоги
  3. Блог xxandeadxx

Очередь событий в jQuery

Главные вкладки

Аватар пользователя xxandeadxx xxandeadxx 7 июля 2012 в 15:48

Есть страница с неизвестным количеством кнопок. На каждую кнопку навешен обработчик onclick, который асинхронно выполняет какую-то функцию:

<!DOCTYPE html>
<html>
<head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script>
        $(function() {
                $('input').click(function() {
                        var $button = $(this);
                        $button.attr('disabled', 'disabled');
                        setTimeout(function() {
                                $button.removeAttr('disabled');
                        }, 2000);
                });
        });
        </script>
</head>
<body>
        <input type="button" value="Button 1" />
        <input type="button" value="Button 2" />
        <input type="button" value="Button 3" />
</body>
</html>

Как сделать так, чтобы при нажатии подряд двух и более кнопок, onclick второй и последующей кнопки, вызывался только после завершения работы предыдущей. Т.е. если нажать подряд три кнопки, то первая должна стать неактивной, через две секунды она снова делается активной и тоже самое повторяется со второй кнопкой, а дальше и с третьей.

Сделал с костылём на очередях jquery. Может есть более красивое решение без дополнительных плагинов?

Update: оказывается если не использовать именнованную очередь, то первый вызов dequeue() можно опустить. Получается вроде красиво:

        $(function() {
                var $document = $(document);
                $('input').click(function() {
                        var $button = $(this);
                        $document.queue(function() {
                                $button.attr('disabled', 'disabled');
                                setTimeout(function() {
                                        $button.removeAttr('disabled');
                                        $document.dequeue();
                                }, 2000);
                        });
                });
        });

Комментарии

Аватар пользователя Shok211 Shok211 7 июля 2012 в 18:18

Хммм по поводу click лучше использовать метод on так как он будет работать и для элементов которые будут добавлены в DOM без обновления обработчика.

Аватар пользователя Shok211 Shok211 7 июля 2012 в 18:29

http://jsfiddle.net/CjpmP/517/

В прошлом примере была куча ошибок.
Здесь их нет.
Обработчик выполниться только один раз.
Выключенные ранее кнопки обрабатываться не будут.
Последовательность нажатий сохраниться.
Если убрать проверку hasClass(pressed) можно делать бесконечную очередь.
Если убирать класс pressed в конце выполнения обработчика то в очередь снова можно снова добавить кнопку.
Возможно сортировать массив команд если установить индексы кнопок.

upd*

Щас выполняется не очередь а последовательность действий.