xandeadx.ru Блог музицирующего веб-девелопера

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

Опубликовано в

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

<input type="button" value="Button 1" />
<input type="button" value="Button 2" />
<input type="button" value="Button 3" />
 
<script>
$(function() {
    $('input').click(function() {
        var $button = $(this);
        $button.attr('disabled', 'disabled');
        setTimeout(function() {
            $button.removeAttr('disabled');
        }, 2000);
    });
});
</script>

Задача — поставить выполнение обработчиков onclick в очередь, т.е. чтобы каждый новый начинал работу только после завершения выполнения предыдущего.

Решение на jQuery.queue():

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

Демо.

Похожие записи

Комментарии RSS

Спасибо за пост. Просто и понятно.

На кану встретилась аналогичная задача - разрулил так:

(function($){
  $('body').once(function () { 
    window.setInterval(function() {
      $(document).queue(function() {
 
        /* Какой-то код */    
 
        $(document).dequeue();
      });
      return true;
    }, 5000);
  });
})(jQuery);

Красивая фишка - API

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании