javascript - 通过 promise 包装代码

Question

我使用GSAP库来制作动画。我试图用 promise 来包装它:

$().promise().then(function() {
     var timeline = new TimelineMax();
    timeline.to( $('.box'), 0.5, {css: {boxShadow: '0 0 40px 40px red'}}, 'box' )
            .to($('.box'), 0.5, {css: {boxShadow: 'none'}}, 'box+=5')

})
.then(console.log(1))

但是，console.log 在启动时运行。如何解决？
DEMO

Answer 1

您应该使用 $.Deferred() 作为 Promise 对象。

jQuery.Deferred()

A constructor function that returns a chainable utility object with methods to register multiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function.

More

var dfd = $.Deferred();

var timeline = new TimelineMax();

timeline.to( $('.box'), 0.5, {css: {boxShadow: '0 0 40px 40px red'}}, 'box' )
        .to($('.box'), 0.5, {css: {boxShadow: 'none'}}, 'box+=5');

// When animation ended you should call dfd.resolve()

dfd.done(function() {
    alert("succeeded");
});