javascript - 使用 JQuery Deferred 和 Promise

Question

我有一个函数，我想使用延迟并 promise 链接动画。

第一个动画是一个打字机插件，使用 https://github.com/stephband/jticker/blob/master/js/jquery.jticker.js 。第二个是包含其他动画的函数。

我想要做的是运行第一个动画，当动画完成时，运行第二个动画。

 $(function () {            
        var ticker =setTimeout(runTicker(), 8000);           
        $.when(ticker).done(function(){
            setTimeout(Other(),16000)});
    });

  function runTicker() {
        $("#ticker").ticker({
            cursorList: " ",
            rate: 50,
            delay: 18000
        }).trigger("play").trigger("stop");
    }

我已经尝试了很多 deferred 的例子，但仍然无法得到它。

我终于清除了所有示例，以便让代码再次工作。

如何使用 deferred 和 Promise 来运行 Other() 函数？

谢谢

Answer 1

不知道如何使用适当的基于回调的解决方案解决您的实际问题(关于您使用的 Ticker 插件的信息不足)，但我可以解释您当前代码中出现的问题:

var ticker = setTimeout(runTicker(), 8000);

不要立即调用runTicker。您想要的是将函数本身 - 而不是其调用的结果 - 传递到 setTimeout 。将返回一个[普通整数]数字并分配给ticker。它可用于通过 clearTimeout 中止时识别超时。 - 没有其他地方。

$.when(ticker)...

现在创建一个新的延迟。看看its documentation :它将把 Deferred 对象相互组合起来，并为任何其他值(例如数字)创建立即解决的 Promise。因此，您的 done 回调也会立即被调用，并且您再次犯了执行 Other 而不是将其传递给 setTimeout 的错误。

<小时/>

由于您使用的插件在回调方面似乎非常有限，所以我现在编写了自己的插件(只是为了好玩:-)。它改编了我的解决方案 this former answer它非常优雅地使用纯 DOM 方法。它是作为标准 jQuery 插件编写的，甚至支持 stop 和 go 方法，而且最重要的是，它可以很好地集成在 jQuery fx queue 中。 。这意味着您将能够像 animate() 一样使用它。关于回调和链接，如果您想使用 Deferreds，您可以调用 promise() method获得队列结束的 Promise。调用示例:

$('#ticker').fadeOut().delay(2000).typewriter({framerate:1000/30}, function() {
    // the typewriter effect has just ended
}). ... .promise().done(function() {
    // effect queue has ended - start Other()
});

jQuery(".stop").click($.fn.typewriter.bind($("#ticker"), "stop"));

→ Code at jsfiddle.net