Как при быстром многократном клике по кнопке обрабатывать только первый клик

@battrack · Регистрация: 17.02.2009

Студворк — интернет-сервис помощи студентам

Есть такая задача:
Элемент (например div) должен двигаться влево по клику по кнопке.
Кликнули по кнопке, скрипт изменил свойство элемента left на определенный шаг. Все ок.
Необходимо чтобы после клика по кнопке, пока объект не перестанет двигаться, кнопка не реагировала бы на другой клик по ней. Т.е. грубо говоря, пока обрабатывается первый клик (происходит какая-то анимация и т.п.), на еще один клик кнопка не должна реагировать. Как анимация завершится, кнопка снова может обрабатывать клик. Не знаю как это сделать.
Если несколько раз кликнуть по кнопке быстро, то все обработчики становятся в очередь и обрабатываются. В итоге если быстро кликнули по кнопке три раза, то элемент переместится на 3 шага. А мне жизненно важно чтобы элемент перемещался на один шаг. Как только шаг завершится, кнопка доступна для еще одного клика и т.д.
Вариант со скрытием кнопки, пока идет анимация, не подходит.

Как быть? Можно ли из многочисленных кликов по кнопке обрабатывать только первый клик? А остальные клики не выстраивать в очередь. Как только завершится код внтри обработчика клика, то по кнопке снова можно кликать???

@2Garin · 21.03.2012, 23:25

попробуйте после клика по элементу, отвязать обработчик клика на нем .off(), а по выполнении перемещения обратно повесить .on()

@Daredevi1 · 22.03.2012, 10:29

HTML5
1
2
<div></div>
<button>move</button>

CSS
1
2
3
4
5
6
7
8
div {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 50px;
    left: 0;
    background: red;
}

JavaScript
1
2
3
4
5
6
var flag = false;
$('button').click(function(){
    if (flag) return false;
    flag = true;
    $('div').animate({left: '+=100px'}, function(){flag = false;});                                                 
});

Вот живой пример:
http://jsfiddle.net/c2Gkg/2/

@battrack · 22.03.2012, 10:46 **[ТС]**

Daredevi1, огромное спасибо!
Этот прием 100%-о помог!! Все работает!

@Daredevi1 · 22.03.2012, 11:33

Для спасибо, есть кнопочка

@KILL9RU · 22.03.2012, 14:46

Помоему намного легче и правильнее просто disable у кнопки выставлять в True.

Новые блоги и статьи Все статьи Все блоги /
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20%	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .

@battrack 0 / 0 / 0 Регистрация: 17.02.2009 Сообщений: 34

	Как при быстром многократном клике по кнопке обрабатывать только первый клик 21.03.2012, 17:34. Показов 6588. Ответов 5 Метки нет (Все метки) Есть такая задача: Элемент (например div) должен двигаться влево по клику по кнопке. Кликнули по кнопке, скрипт изменил свойство элемента left на определенный шаг. Все ок. Необходимо чтобы после клика по кнопке, пока объект не перестанет двигаться, кнопка не реагировала бы на другой клик по ней. Т.е. грубо говоря, пока обрабатывается первый клик (происходит какая-то анимация и т.п.), на еще один клик кнопка не должна реагировать. Как анимация завершится, кнопка снова может обрабатывать клик. Не знаю как это сделать. Если несколько раз кликнуть по кнопке быстро, то все обработчики становятся в очередь и обрабатываются. В итоге если быстро кликнули по кнопке три раза, то элемент переместится на 3 шага. А мне жизненно важно чтобы элемент перемещался на один шаг. Как только шаг завершится, кнопка доступна для еще одного клика и т.д. Вариант со скрытием кнопки, пока идет анимация, не подходит. Как быть? Можно ли из многочисленных кликов по кнопке обрабатывать только первый клик? А остальные клики не выстраивать в очередь. Как только завершится код внтри обработчика клика, то по кнопке снова можно кликать??? 0

@2Garin 7 / 7 / 1 Регистрация: 19.03.2012 Сообщений: 30
	21.03.2012, 23:25
	попробуйте после клика по элементу, отвязать обработчик клика на нем .off(), а по выполнении перемещения обратно повесить .on() 0

@battrack 0 / 0 / 0 Регистрация: 17.02.2009 Сообщений: 34
	22.03.2012, 10:46 [ТС]
	Daredevi1, огромное спасибо! Этот прием 100%-о помог!! Все работает! 0

@Daredevi1 311 / 303 / 78 Регистрация: 09.05.2009 Сообщений: 723
	22.03.2012, 11:33
	Для спасибо, есть кнопочка 0

@KILL9RU 22 / 1 / 1 Регистрация: 22.03.2012 Сообщений: 10
	22.03.2012, 14:46
	Помоему намного легче и правильнее просто disable у кнопки выставлять в True. 0