jQuery FlexSlider插件一些使用上的小tips

---

最近做的一个需求，用到了jQuery FlexSlider这个插件，本以为一个算是已经比较成熟的插件，用起来应该没什么难度，然而真正用起来才发现，其实还是有些坑的，不过好在这个插件源代码写的比较好，比较好看，所以自己多看看也就能弄明白。

网上那些随便一搜就能找到的你抄我我抄你大家互相抄的东西，我就不继续浪费网络资源和自己的时间了，主要是一些网上很难找到的或者比较模棱两可的点，这里以jQuery FlexSlider v2.6.3这个版本为例，总结如下。

---

回调方法

网上一些提到 flex-slider插件的方法，基本上都是一带而过，而且模棱两可，我估计当时作者不知从哪里看到然后随手 copy下来的时候，连他自己都不知道自己在写些什么。

一共 7个回调函数，如下：

1. start: function(){}
   源代码里面标注的解释是：当第一个滑块第一次加载完毕后执行。 说白了就是当此组件初始化(init)完成后，然后又当第一个滑块加载完毕后，此函数执行，在当前slider组件的整个生命周期中，只执行一遍。
2. before: function(){}
   在滑块运动之前的一刻执行，也就是说当你点击切换当前轮播项的时候，此函数会在轮播项开始运动的前一刻执行。
3. after: function(){}
   和上一个相反，在滑块运动完成的下一刻执行，也就是说当你点击切换当前轮播项的时候，此函数会在轮播项完成运动的下一刻执行。
4. end: function(){}
   当前整个轮播组件滑动到了最后一个滑块的时候执行，与滑块的运动动作异步并行执行，也就是说是在 before 和 after 函数之间执行，每次到达尾部，此函数都会执行一遍。
5. added: function(){}
   当新的滑块被追加到轮播组件中后，就会调用此回调函数。
6. removed: function(){}
   当轮播组件中有滑块被删除掉后，此函数会执行
7. init: function() {}
   当轮播组件初始化完成后执行，此函数实际上不仅只在开始的时候和执行一遍，如果第一次初始化完后，继续向轮播组件中追加滑块，则此函数还可能会被调用，所以在轮播组件的整个生命周期中，此函数被调用的次数 >= start 函数被调用的次数。

---

异步获取数据初始化

如果轮播组件的数据是异步获取而来，则很显然在数据尚未获得之前，flex-slider是不能够进行初始化的，否则将会出现异常情况。

对于这种情况，有两种常用的解决手段，一是使用回调函数，二是使用 Promise

通过回调函数初始化组件

首先页面发送获取数据的的请求，当数据成功获取后，再在回调函数中进行 flex-slider的初始化。

如下示例（为了简化代码，使用到了 Jquery库）：

$(function(){
    getData(){
        $.getJSON(