Модуль callbacks

В Zepto callbacks выполняют ключевую роль в управлении асинхронными операциями и последовательностью выполнения функций. Под callback подразумевается функция, которая передаётся в другую функцию и вызывается после завершения определённого действия. В Zepto callbacks особенно востребованы при работе с анимациями, событиями и AJAX-запросами.

Синхронные и асинхронные callbacks

Синхронные callbacks выполняются сразу после вызова функции, в которую они были переданы. Например, при обходе элементов коллекции с помощью метода each:

$('div').each(function(index, element) {
    console.log(index, element);
});

Здесь функция, переданная в each, является синхронным callback, выполняющимся для каждого элемента коллекции.

Асинхронные callbacks используются, когда действие занимает время, например, при анимациях или AJAX-запросах:

$('#box').fadeOut(400, function() {
    console.log('Анимация завершена');
});

Функция console.log выполняется только после завершения анимации, что позволяет управлять последовательностью действий.

Callbacks в анимациях

Zepto предоставляет несколько методов для анимации элементов: fadeIn, fadeOut, slideUp, slideDown, animate. Все они поддерживают передачу callback-функции.

$('#box').animate({ width: '300px', height: '200px' }, 500, function() {
    console.log('Анимация размеров завершена');
});

Особенности работы:

  • Callback вызывается один раз после завершения анимации.
  • Если анимация применяется к набору элементов, callback выполняется для каждого элемента отдельно.
  • Передача нескольких callback через цепочку методов позволяет создавать сложные последовательные эффекты.
$('#box')
    .fadeOut(300, function() {
        $(this).fadeIn(300);
    });

Callbacks в событиях

Методы on, off, one используют callbacks для обработки событий:

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

Ключевые моменты:

  • Callback получает объект события (event) с информацией о типе события, целевом элементе, координатах и других параметрах.
  • Для однократного срабатывания используют метод one:
$('#button').one('click', function() {
    console.log('Сработало один раз');
});
  • Для удаления callback применяется off:
function handleClick() {
    console.log('Обработчик удалён');
}
$('#button').on('click', handleClick);
$('#button').off('click', handleClick);

Callbacks в AJAX

Zepto предоставляет метод $.ajax и короткие аналоги $.get, $.post, которые принимают callbacks для обработки результатов:

$.get('/data.json', function(response) {
    console.log('Данные получены:', response);
});

Метод $.ajax поддерживает несколько callback:

  • success: вызывается при успешном завершении запроса.
  • error: вызывается при ошибке.
  • complete: вызывается в любом случае после завершения запроса.
$.ajax({
    url: '/data.json',
    method: 'GET',
    success: function(data) {
        console.log('Успешно:', data);
    },
    error: function(xhr) {
        console.log('Ошибка:', xhr.status);
    },
    complete: function() {
        console.log('Запрос завершён');
    }
});

Управление контекстом this в callbacks

В Zepto внутри callback this ссылается на DOM-элемент, к которому применяется метод. Для получения объекта Zepto можно использовать $(this):

$('li').each(function() {
    $(this).addClass('active');
});

При работе с AJAX this по умолчанию ссылается на объект настроек запроса, но часто удобнее использовать стрелочные функции или явное связывание контекста через bind.

Паттерны последовательного выполнения

Для организации последовательных действий можно использовать вложенные callbacks, что позволяет управлять асинхронными процессами:

$('#box')
    .fadeOut(200, function() {
        $(this).css('background-color', 'red').fadeIn(200);
    });

Более сложные сценарии управляются цепочкой функций, где каждая callback запускает следующую. При работе с множеством асинхронных операций рекомендуется разделять логику на отдельные функции, чтобы избежать “callback hell”.

Особенности и ограничения

  • Callback может быть любым объектом, который является функцией (function или стрелочная функция).
  • Ошибки внутри callback не останавливают выполнение других операций, но могут нарушить цепочку асинхронных действий.
  • Методы Zepto часто принимают необязательный callback. Если он не передан, метод выполнится без него.

Практическое применение

  1. Анимация нескольких элементов с уведомлением о завершении:
$('.item').each(function() {
    $(this).fadeOut(100, function() {
        console.log('Элемент скрыт:', this);
    });
});
  1. Обработка AJAX-запроса с разделением успеха и ошибки:
$.get('/api/users', function(data) {
    console.log('Пользователи:', data);
}).fail(function(xhr) {
    console.log('Ошибка запроса:', xhr.status);
});
  1. События с однократным срабатыванием и последующим удалением обработчика:
$('#submit').one('click', function() {
    console.log('Форма отправлена один раз');
});

Callbacks в Zepto — это мощный инструмент для управления поведением элементов, событий и асинхронных операций. Их правильное использование обеспечивает гибкость и структурированность кода, позволяя точно контролировать последовательность действий и обработку данных.

Оглавление