1

我有一个函数，我想使用 deferred 并承诺链接动画。

第一个动画是一个类型编写器插件，使用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 和 promise 来运行 Other() 函数？

谢谢

4

2 回答 2

1

不知道如何使用适当的基于回调的解决方案来解决您的实际问题（关于您使用的 Ticker 插件的信息不足），但我可以解释您当前代码中出了什么问题：

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

不要runTicker马上打电话。您想要的是将函数本身（而不是其调用的结果）传递给setTimeout. 将返回一个 [纯整数] 数字并分配给ticker. 它可用于在通过clearTimeout- 而不是其他任何地方中止它时识别超时。

$.when(ticker)...

现在创建一个新的 Deferred。看看它的文档：它将 Deferred 对象相互结合，并为任何其他值（如数字）创建立即解析的 Promise。因此，您的done回调也被立即调用，并且您再次犯了错误，执行Other而不是将其传递给setTimeout.

由于您使用的插件在回调方面似乎非常有限，所以我现在已经编写了自己的插件（只是为了好玩:-)。它从这个以前的答案改编了我的解决方案，它非常优雅地使用了纯 DOM 方法。它被编写为标准的 jQuery 插件，甚至支持stop和go方法，并且 - 最重要的是 - 很好地集成在jQueryfx队列中。这意味着您将能够像使用animate()回调和链接一样使用它，如果您想使用 Deferreds，您可以调用该promise()方法来获取队列结束的 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"));

→ jsfiddle.net 上的代码

于 2012-11-14T18:56:38.590 回答
0

setTimeout显然不会返回 jQuery Deferred 对象，它是这里的原生 Javascript 方法。你需要像这样重写它：

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

            promise.resolve();
        }, 8000);
    }).promise();
}

然后你可以这样称呼它

var ticker = runTicker();

jQuery.when( ticker ).done(function() {
    setTimeout(Other,16000)});
});
于 2012-11-14T18:10:39.620 回答