Using jQuery Deferred and Promising

Question

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

The first animation is a plugin to create fonts 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 complete, start 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 many delayed examples, but still can't get them.

Finally, I cleared all the examples to activate the ticker again.

How to use deferred and promise to launch the Other () function?

thank

Answer 1

I don’t know how to solve your current problem with a proper callback based solution (there is not enough information about the Ticker plugin that you use), but I can explain what is wrong with your current code:

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

Do not call runTicker immediately. You want to pass this function, not the result of its call, to setTimeout . The number [plain integer] will be returned and assigned by ticker . It can be used to identify a timeout when it is interrupted with clearTimeout - and nowhere else.

 $.when(ticker)... 

creates a new Deferred Now. Look at his documentation : it will combine objects with deferred with each other and create immediately resolved Promises for any other values ​​- for example, numbers. Therefore, your done callback is also called with an error, and again you make an error with Other instead of passing it to setTimeout .

---

Since the plugin you use seems very limited regarding callbacks, I wrote my own now (just for fun :-). It adapts my solution from this former answer , which uses elegant DOM methods. It is written as a standard jQuery plugin, it even supports the stop and go methods and, most importantly, integrates well into the jQuery fx queue. This means that you can use it just like animate() with respect to callbacks and chains, and if you want to work with Deferreds, you can call the promise() method to get a promise for the end of the queue. Call example:

 $('#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 in jsfiddle.net

Answer 2

setTimeout will not explicitly return a JQuery Deferred object, its own Javascript method here. You need to rewrite it like this:

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

And then you can call it like

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