Последовательность срабатывания событий

В библиотеке Isotope события представляют собой мощный инструмент для управления поведением сетки при фильтрации, сортировке и перестройке элементов. Каждый раз, когда сетка изменяется — будь то добавление новых элементов, применение фильтров или изменение сортировки — Isotope генерирует соответствующие события, к которым можно привязать пользовательские функции.

События в Isotope делятся на несколько категорий:

  • layoutComplete — срабатывает после завершения перестроения всех элементов сетки.
  • arrangeComplete — возникает после завершения фильтрации или сортировки элементов.
  • removeComplete — активируется после удаления элементов из сетки.
  • fitComplete — срабатывает после завершения анимации «fit» для каждого отдельного элемента.

Эти события передают в коллбэки объект event и ссылку на экземпляр Isotope, а также массив затронутых элементов, что позволяет точно контролировать дальнейшие действия.

Последовательность срабатывания событий

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

  1. Начало операции Любая модификация сетки (например, filter, sort, insert, remove) инициирует внутренний процесс перестроения. На этом этапе прямых пользовательских событий ещё нет, но Isotope подготавливает все элементы к изменению.

  2. fitComplete для каждого элемента После того как Isotope начинает изменять позиции элементов, каждое отдельное перемещение или перестройка элемента вызывает событие fitComplete. Если перемещается несколько элементов, событие срабатывает столько раз, сколько элементов подверглись анимации. Пример:

    $grid.on('fitComplete', function(event, laidOutItems) {
    console.log('Элемент перестроен:', laidOutItems);
});

  3. layoutComplete после перестройки всех элементов Когда все элементы сетки завершили анимацию расположения, Isotope генерирует layoutComplete. Это событие особенно важно для синхронизации внешних действий с окончанием перестройки сетки.

    $grid.on('layoutComplete', function(event, laidOutItems) {
    console.log('Сетка полностью перестроена:', laidOutItems.length, 'элементов');
});

  4. arrangeComplete после фильтрации или сортировки Событие arrangeComplete появляется после окончания фильтрации (filter) или сортировки (sort). Оно срабатывает уже после layoutComplete, гарантируя, что элементы расположены в финальном виде.

    $grid.on('arrangeComplete', function(event, filteredItems) {
    console.log('Фильтрация завершена. Отфильтровано элементов:', filteredItems.length);
});

  5. removeComplete после удаления элементов Если удаляются элементы с помощью метода remove, Isotope сначала запускает анимацию удаления, затем генерирует removeComplete для синхронизации дальнейших действий, например, обновления счетчиков или интерфейса.

    $grid.on('removeComplete', function(event, removedItems) {
    console.log('Удалено элементов:', removedItems.length);
});

Важные особенности

  • Асинхронность событий События fitComplete и layoutComplete срабатывают после завершения анимации. Если скорость анимации установлена в 0, события срабатывают практически синхронно, но порядок сохраняется.

  • Передача элементов Все события передают массив элементов, затронутых операцией. Это позволяет фильтровать, изменять или добавлять дополнительные действия на конкретные элементы.

  • Взаимодействие с внешними скриптами Благодаря строгой последовательности можно легко интегрировать Isotope с библиотеками анимаций, счетчиками или динамическим контентом, не нарушая порядок перестройки элементов.

Пример полной цепочки событий

var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'
});

$grid.on('fitComplete', function(event, laidOutItems) {
  console.log('fitComplete для', laidOutItems.length, 'элементов');
});

$grid.on('layoutComplete', function(event, laidOutItems) {
  console.log('layoutComplete — все элементы перестроены');
});

$grid.on('arrangeComplete', function(event, filteredItems) {
  console.log('arrangeComplete — фильтрация завершена, элементов:', filteredItems.length);
});

$grid.on('removeComplete', function(event, removedItems) {
  console.log('removeComplete — удалено элементов:', removedItems.length);
});

// Пример операций
$grid.isotope({ filter: '.active' });
$grid.isotope('remove', $('.grid-item.remove'));

В этом примере операции выполняются последовательно: fitComplete для каждого элемента → layoutComplete → arrangeComplete → removeComplete. Это позволяет точно контролировать логику интерфейса и предотвращает гонки событий при сложных динамических изменениях сетки.

Рекомендации по использованию

  • Всегда использовать arrangeComplete для действий, зависящих от окончательного состояния сетки после фильтрации или сортировки.
  • Для анимаций отдельных элементов — привязывать функции к fitComplete.
  • Для массовых операций удаления — использовать removeComplete для синхронизации интерфейса и подсчёта элементов.
  • Избегать выполнения критических операций между fitComplete и layoutComplete, если важно, чтобы все элементы были уже на своих местах.

Такая структурированная последовательность событий обеспечивает предсказуемое поведение Isotope при любых изменениях сетки и позволяет строить сложные динамические интерфейсы без конфликтов.

Оглавление