Одноразовые обработчики

Одноразовые обработчики событий — это функции, которые выполняются только один раз при возникновении события и автоматически удаляются после своего вызова. В библиотеке Cash для этого используется метод .one(), который облегчает управление событиями и уменьшает вероятность утечек памяти, связанных с множеством невыполняющихся обработчиков.

Метод .one()

Синтаксис метода:

$(селектор).one(событие, [селектор_вложенного_элемента], обработчик);

Параметры:

  • событие — строка с названием события, например "click", "mouseenter", "keydown". Можно передавать несколько событий через пробел.
  • селектор_вложенного_элемента — необязательный селектор для делегирования событий на вложенные элементы.
  • обработчик — функция, которая будет вызвана при срабатывании события.

Метод .one() возвращает объект Cash для возможности цепочки вызовов.

Пример использования

// Одноразовый клик по кнопке
$('#button').one('click', function() {
    console.log('Кнопка была нажата один раз');
});

После первого клика обработчик удаляется автоматически, последующие клики уже не вызывают функцию.

Делегирование событий с одноразовыми обработчиками

Одноразовые обработчики могут применяться к динамически создаваемым элементам через делегирование:

$('#list').one('click', 'li', function() {
    console.log('Элемент списка был нажат один раз');
});

В этом примере обработчик назначается на контейнер #list, но реагирует только на клики по вложенным элементам li. После первого срабатывания обработчик удаляется для конкретного элемента.

Несколько событий одновременно

Метод .one() поддерживает привязку нескольких событий сразу:

$('#input').one('focus blur', function(event) {
    console.log(`Событие ${event.type} произошло один раз`);
});

Первое событие, которое произойдет (focus или blur), вызовет обработчик, и он больше не будет выполняться ни для одного из этих событий.

Передача данных в одноразовый обработчик

В метод .one() можно передать объект с данными, которые будут доступны внутри обработчика через event.data:

$('#button').one('click', {count: 1}, function(event) {
    console.log('Обработчик вызван один раз, count =', event.data.count);
});

Это удобно для передачи конфигурации или состояния, не создавая глобальных переменных.

Сравнение с .on()

Метод .on() назначает постоянный обработчик, который выполняется каждый раз при возникновении события:

$('#button').on('click', function() {
    console.log('Кнопка нажата');
});

Отличие .one() заключается в автоматическом удалении функции после первого вызова, что позволяет:

  • Избежать избыточного срабатывания обработчиков.
  • Снизить нагрузку на память и обработку событий.
  • Обеспечить чистый и предсказуемый код при одноразовых действиях.

Важные моменты

  1. Удаление обработчиков вручную после .one() не требуется, так как это делает библиотека автоматически.
  2. Контекст внутри обработчика (this) указывает на элемент, на котором произошло событие, как и в .on().
  3. Комбинация с делегированием позволяет назначать одноразовые обработчики для элементов, которые ещё не существуют в DOM.
  4. Метод .one() может быть вызван на нескольких элементах сразу, и обработчик будет удален только для того элемента, на котором произошло событие.

Практические сценарии

  • Кнопка подтверждения, которая должна срабатывать только один раз.
  • Временные уведомления, исчезающие после первого клика.
  • Одноразовые анимации при первом наведении мыши.
  • Одноразовая регистрация события для элементов, создаваемых динамически через AJAX.

Резюме поведения

Метод Количество вызовов Удаление обработчика
.on() Неограниченно Вручную через .off()
.one() Один раз Автоматически после срабатывания

Использование .one() позволяет писать более безопасный и оптимизированный код, избегая ошибок, связанных с многократным срабатыванием обработчиков.

Оглавление