如何链接 .call() 函数 - 向 Nivo Lightbox 添加过渡答案

【问题标题】：How to chain .call() functions - adding transitions to Nivo Lightbox如何链接 .call() 函数 - 向 Nivo Lightbox 添加过渡
【发布时间】：2014-12-03 12:42:24
【问题描述】：

我正在尝试为 Nivo 灯箱中显示的项目实现 CSS 动画过渡。我已经插入并运行了新函数，但以下 2 个函数在它完成之前运行。

$('.nivo-lightbox-prev').off('click').on('click', function(e){
    e.preventDefault();                
    var index = galleryItems.index(currentLink);
    currentLink = galleryItems.eq(index - 1);
    if(!$(currentLink).length) currentLink = galleryItems.last();
    $this.options.beforePrev.call(this, [ currentLink ]);  # <---- new function I added
    $this.processContent(content, currentLink);            # <---- existing function 1
    $this.options.onPrev.call(this, [ currentLink ]);      # <---- existing function 2
});

我知道的唯一方法是将它们放入回调中，但 .call() 不接受回调。

我试过了：

function beforePrev(callback){
    $this.options.beforePrev.call(this, [ currentLink ]);
    callback();
}
function onPrev(){
    $this.processContent(content, currentLink);
    $this.options.onPrev.call(this, [ currentLink ]);
}
beforePrev(onPrev);

但它的行为是一样的。

如果相关，beforePrev 的代码是：

beforePrev: function() {
    el = $('.nivo-lightbox-content');
    el.addClass('animated fadeOutLeft');
    el.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function (e) {
        el.removeClass('fadeOutLeft');
    });
},

谁能指出我正确的方向？

更新/编辑以提高清晰度：这是完整的原始 Nivo 代码：link

根据我的阅读，$this 只是一个引用 init 函数的标准变量，而不是 DOM 对象。我认为这是这似乎很难做到的原因之一。

【问题讨论】：

标签： javascript jquery lightbox nivo-slider

【解决方案1】：

使用.queue()

为了只在函数a完成后执行函数b：

$('element').a()
.queue(function() {
   $('element').b();
   $(this).dequeue();
});

【讨论】：

谢谢@kapantzak - 看起来它可以工作，但我无法做到。我认为问题是$this 指的是init 对象？？（这是完整的 Nivo 代码：link）

【解决方案2】：

原来 deferind / promise 是这里的关键，使用 jQuery 的 .when():http://api.jquery.com/jquery.when/

这个答案：How to use "queue" or "deferred" in what condition? What are their designing purpose? 帮助 - .queue() 主要用于动画并作用于 DOM 对象，而 .deferred() 用于异步操作。

所以在这个例子中：

$('.nivo-lightbox-prev').off('click').on('click', function(e){
    e.preventDefault();
    var index = galleryItems.index(currentLink);
    currentLink = galleryItems.eq(index - 1);
    if(!$(currentLink).length) currentLink = galleryItems.last();
    $.when($this.options.beforePrev.call(this, [ currentLink ])).done(function(){
        $this.processContent(content, currentLink);
        $this.options.onPrev.call(this, [ currentLink ]);
    });
});

然后在 beforePrev 函数中，首先设置一个 .deferred() 对象，完成后 .resolve() ，最后将 .promise() 传回：

beforePrev: function() {
    var deferred = $.Deferred();
    el = $('.nivo-lightbox-content');
    el.addClass('fastAnimated fadeOutRight');
    el.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function (e) {
        el.removeClass('fadeOutRight');
        deferred.resolve();
    });
    return deferred.promise();
},

【讨论】：