Filterizr 回调事件全解析：7 大生命周期事件助你掌控动画节奏

Filterizr 回调事件全解析：7 大生命周期事件助你掌控动画节奏

【免费下载链接】filterizr:sparkles: Filterizr is a JavaScript library that sorts, shuffles and filters responsive galleries using CSS3 transitions :sparkles:项目地址: https://gitcode.com/gh_mirrors/fi/filterizr

Filterizr 是一个基于 CSS3 过渡动画的 JavaScript 库，专为响应式图片画廊提供排序、洗牌和筛选能力。对于新手开发者来说，理解Filterizr 回调事件是进阶的关键一步——它们能让你在筛选动画开始、结束等关键时刻执行自定义逻辑，真正"掌控动画节奏"。本文将用最简单的方式，为你拆解Filterizr 生命周期事件的 7 大回调，从触发时机到实际用法一网打尽。

什么是 Filterizr 回调事件：一图看懂生命周期

Filterizr 的生命周期大致分为三个阶段：初始化（Init）→ 操作（Filter / Sort / Shuffle）→ 动画结束（End）。每进入一个阶段，库都会触发对应的事件，而你通过options.callbacks配置对象注册的监听函数（也就是回调）会被自动调用。

在源码中，这 7 个回调被集中定义在 RawOptionsCallbacks.ts 接口里，它们的默认值全部是空函数（noop），见 defaultOptions.ts，意味着不配置也不会报错，配置了才会生效，非常安全。

Filterizr 7 大生命周期事件快速总览

回调事件	触发时机	典型用途
onInit	网格初始化、图片加载完成后	统计加载耗时、埋点上报
onFilteringStart	点击筛选按钮，动画开始前	显示 loading 状态
onFilteringEnd	筛选动画全部结束	隐藏 loading、记录结果
onShufflingStart	执行洗牌前	禁用交互按钮
onShufflingEnd	洗牌动画结束	恢复交互
onSortingStart	排序动画开始前	更新排序状态 UI
onSortingEnd	排序动画结束	提示排序完成

onInit：初始化完成的信号 📡

onInit是第一个触发的回调，它在图片全部加载、网格完成首次渲染后才被调用。如果你需要在页面加载后统计"画廊从开始到就绪花了多久"，或者初始化第三方统计工具，这个回调就是最佳挂载点。

它由 Filterizr.ts 的initialize()方法在渲染完成并启用过渡动画后触发，确保你拿到的网格已经处于可用状态。

onFilteringStart 与 onFilteringEnd：筛选动画的起点与终点 🎬

这是使用频率最高的两个 Filterizr 回调事件。当你调用filter()或点击带data-filter的控制按钮时，onFilteringStart会立刻触发；当所有元素的过渡动画真正结束时，onFilteringEnd才姗姗来迟。

这对回调最大的价值在于"异步感知"：筛选动画耗时取决于动画时长与延迟，普通代码很难精确知道何时结束。借助它们，你可以放心地在结束时加载新内容、更新徽标数量，而不用担心动画被截断。

onShufflingStart 与 onShufflingEnd：洗牌的节拍器 🔀

shuffle()会随机打乱网格中所有元素的位置。onShufflingStart在打乱开始前触发，onShufflingEnd在位置交换动画结束后触发。由于洗牌会改变用户当前浏览的视觉顺序，通常建议在开始时锁定筛选控件，结束时再解锁，避免用户中途点击造成混乱。

onSortingStart 与 onSortingEnd：排序的完整闭环 📊

排序是 Filterizr 的招牌能力之一，支持按任意属性升序/降序排列。onSortingStart与onSortingEnd则让你能围绕排序过程做文章：开始时高亮当前排序字段，结束时把排序结果同步到其他组件（比如列表视图）。

三个操作（筛选、排序、洗牌）的结束事件在 FilterContainer.ts 中通过监听transitionend并配合当前状态机来精准分发，这就是它们能精确对齐动画节奏的原因。

如何配置 Filterizr 回调事件：最小可用示例

在 Filterizr 中配置回调非常直观，只需在初始化时传入callbacks对象：

const filterizr = new Filterizr('.filtr-container', { animationDuration: 0.5, callbacks: { onInit: () => console.log('网格已就绪'), onFilteringStart: () => showLoading(), onFilteringEnd: () => hideLoading(), }, });

如果你的 HTML 结构参考 demo/index.html，那么把上述代码放进页面底部即可立即体验回调带来的反馈效果。

动态更新回调事件：setOptions 的高级玩法 ⚙️

回调不一定要在初始化时写死。Filterizr 提供了setOptions()方法，支持在运行过程中整体替换回调。源码会在检测到新的callbacks时，先解绑旧事件再绑定新事件（见 Filterizr.ts 的setOptions实现），因此可以安全地热切换：

filterizr.setOptions({ callbacks: { onFilteringEnd: () => notifyAnalytics('filter-done'), }, });

这种"先解绑、后绑定"的严谨设计，让 Filterizr 在复杂单页应用中也能放心使用。

Filterizr 回调事件的最佳实践与避坑建议 🛠️

• 不要在回调里同步调用同类操作：结束回调触发时动画刚完成，此时立即再次筛选可能造成状态抖动，建议加一层防抖。
• 结合 loading 状态提升体验：onFilteringStart配onFilteringEnd是加载指示器的最佳搭档，尤其适合图片较多的画廊。
• 利用结束事件做数据同步：无论筛选、排序还是洗牌，结束后网格布局都已稳定，此时读取 DOM 尺寸或位置最准确。
• 查看源码确认细节：想深入理解事件触发机制，可以阅读 FilterContainer.ts 与 Filterizr.ts 的源码；如需本地运行，可通过git clone https://gitcode.com/gh_mirrors/fi/filterizr获取完整仓库。

结语：用回调事件掌控每一次动画

Filterizr 之所以好用，不仅在于它开箱即用的筛选排序能力，更在于这套完整且顺序明确的Filterizr 回调事件体系。掌握onInit、onFilteringStart/End、onShufflingStart/End、onSortingStart/End这 7 大生命周期事件，你就能在动画的每一个关键节点插入自己的逻辑，让交互反馈、数据统计、状态同步都变得游刃有余。

从今天起，试着在你的响应式图片画廊中接入这些回调吧——当你能精确感知动画的每一步，你就真正掌控了它的节奏。🚀

【免费下载链接】filterizr:sparkles: Filterizr is a JavaScript library that sorts, shuffles and filters responsive galleries using CSS3 transitions :sparkles:项目地址: https://gitcode.com/gh_mirrors/fi/filterizr