延迟使用JQuery和Promise [英] Using JQuery Deferred and Promise

问题描述

我有一个函数要使用deferred并承诺链接动画.

I have a function that I want to use deferred and promise to chain an animation.

第一个动画是类型编写器插件，使用 https: //github.com/stephband/jticker/blob/master/js/jquery.jticker.js . 第二个是包含其他动画的函数.

The first animation is a type writer plugin, using https://github.com/stephband/jticker/blob/master/js/jquery.jticker.js. The second is a function that contains other animations.

我想做的是运行第一个动画，并在动画完成后运行第二个动画.

What I want to do is run the first animation and when the animation is completed, run the second.

 $(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");
    }

我尝试了许多延期的示例，但仍然无法做到.

I have tried numerous examples of deferred, but still can't get it.

我最终清除了所有示例，以使股票行情收录器再次正常工作.

I finally cleared all the examples in order to get the ticker working again.

我将如何使用deferred并承诺运行Other()函数?

How would I use deferred and promise to run the Other() function?

谢谢

推荐答案

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

Don't know how to solve your actual problem with a proper callback-based solution (not enough information on the Ticker plugin you use), but I can explain what goes wrong in your current code:

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

不要立即呼叫runTicker.您想要的是将函数本身(而不是调用结果)传递给 clearTimeout -在其他地方都没有.

Don't call runTicker immediately. What you want is to pass the function itself - not the result of its invocation - into setTimeout. A [plain integer] number will be returned and is assigned to ticker. It can be used for identifying the timeout when aborting it via clearTimeout - and nowhere else.

$.when(ticker)...

立即创建一个新的Deferred.看看其文档:它将将Deferred对象彼此结合并立即创建-解决了任何其他值的承诺-例如数字.因此，您的done回调也被立即调用，并且再次执行Other而不是将其传递给setTimeout会出错.

creates a new Deferred now. Have a look at its documentation: It will combine Deferred objects with each other and create immediately-resolved Promises for any other values - like numbers. Therefore, your done callback is also called immidiately, and again you make the mistake with executing Other instead of passing it into setTimeout.

由于您使用的插件在回调方面似乎非常有限，因此我现在编写了自己的插件(只是为了好玩:-).它从以前的答案改编了我的解决方案，该解决方案非常优雅地使用了纯DOM方法.它被编写为标准jQuery插件，甚至支持stop和go方法，并且-最重要的是-与 jQuery fx队列.这意味着您可以像 animate() 一样使用它，有关回调和链接，如果您想使用Deferreds，可以调用 promise()方法以获取队列的Promise结尾.示例调用:

As the plugin you used seems very limited in regard to callbacks, I've written my own now (just for fun :-). It adapts my solution from this former answer which uses pure DOM methods quite elegantly. It is written as a standard jQuery plugin, even favours stop and go methods and - most important - integrates well in the jQuery fx queue. That means you will be able to use it exactly like animate() regarding callbacks and chaining, and if you want to work with Deferreds you can invoke the promise() method to get a Promise for the queue's end. Example call:

$('#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"));

这篇关于延迟使用JQuery和Promise的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！