javascript - 了解 animateSlider.js 中 $.resolve 的用法

Question

我刚刚浏览 animateSlider.js 的代码，发现了以下代码行:

animDuration:   function(page)
        {
            var $slideAnimations            =   this.slides.eq(page);
            var slideAnimationsCount        =   $slideAnimations.children("*.animated").length;
            var animationStart              =   +new Date();

            // DIFF :: understand what $.Deferred() is used for ?
            var promise                     =   new $.Deferred();
            var animationTime,count         =   0;
            $slideAnimations.on("animationend webkitAnimationEnd oanimationend MSAnimationEnd",function()
                {
                    var animationEnd    =   +new Date();
                    animationTime       =   Math.ceil((animationEnd -animationStart)/1000)*1000;
                    count++;
                    if (count == slideAnimationsCount)
                    {
                        // DIFF :: understand what resolve is used for ?
                        promise.resolve(animationTime);
                    }
                });
            return promise;
        }

上面的函数被这样调用:

    this.animDuration(page).done(function(animationTime)

现在我的问题是参数animationTime如何传递给done()函数？

如果我浏览代码，就会像这样创建一个新的 defered 实例:

var promise =   new $.Deferred();

并且有以下内容:

promise.resolve(animationTime);

resolve 传递了 animationTime 参数，然后返回的 Promise 如下所示:

return promise;

但是我仍然不太明白是谁将 animationTime 传递给了 did() 函数，有人可以解释一下吗？

关注的代码行可见 HERE 。

谢谢。

亚历克斯-z。

Answer 1

这是promise model of asynchronous programming 。虽然它已成为 language 的一部分，您看到的是jQuery implementation of this interface 。如果您阅读了所有这些引用资料，您就会了解它在您的案例中的用途。

但是，为了给您提供入门知识，请考虑这个经典的 $.ajax 函数

$.ajax({url: ..., success: function(animationTime){} });

问问自己“什么是传递animationTime”到成功回调？那么是不是很难想象上面的代码是这种形式

$.ajax1({url: ...}).on('success', function(animationTime){});

距离此仅一小步

$.ajax2({url: ...}).success(function(animationTime){})

不是吗？ :) 这一切都是可以 promise 的。它实现了一个接口(interface)，有时称为 thennable，它具有诸如 done 之类的函数，以允许您链接异步计算。