Using JQuery Deferred and Promise

Question

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

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.

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

Thank you

I am uploading the plugin now, but I got it at http://www.thepixelart.com/create-a-typing-text-effect-using-jquery/ Thanks again — Sheri Trager, Nov 14 '12 at 18:53
It's now on-line at http://styliststudioinc.com/jquery.jticker.js — Sheri Trager, Nov 14 '12 at 18:55
also, this is the page I've been working on. http://styliststudioinc.com/start.html I have tried so many different things, my mind is scrambled. — Sheri Trager, Nov 14 '12 at 19:02
Thanks for the link. The plugins does not seem to offer a callback for its animation end, you might want to have a look at [my own solution (simple but fast)](http://stackoverflow.com/a/11665782/1048572) which can easily be converted to return a Promise. Yet it does not support play- and stop-events, but I don't think you would need them anyway. — Bergi, Nov 14 '12 at 19:24
When I was searching for help, I saw your example. I wish I knew jQuery like you, but as you age it takes a while to learn things. I've been watching the learndevnow videos, but I still don't understand how to get this to work. I've already spent about a week trying to figure this out. This application isn't released yet, but at this rate, it never will be:-( Do you offer a paid service that could help me figure this out? — Sheri Trager, Nov 14 '12 at 19:36
I do have an event that stops the runTicker function stopRunTicker() { jQuery(".stop").click(function () { jQuery("#ticker").trigger("stop"); return false; }); } — Sheri Trager, Nov 14 '12 at 19:52
Sorry, I can only offer this free service here :-) As you need the stop'n'go feature and really can't figure out the timeout end in that script (must be somewhere in `ticker` or `tape`), I might rewrite my snippet to integrate with jQuery (it currently does not use a single line of jQuery). — Bergi, Nov 14 '12 at 21:20
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/19557/discussion-between-sheri-trager-and-bergi) — Sheri Trager, Nov 14 '12 at 22:44

score 1 · Accepted Answer · edited May 23 '17 at 12:04

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);

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)...

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.

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"));

→ Code at jsfiddle.net

score 0 · Answer 2 · answered Nov 14 '12 at 18:10

0

setTimeout obviously will not return a jQuery Deferred object, its a native Javascript method here. You need to re-write it like so:

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)});
});

answered Nov 14 '12 at 18:10

jAndy

231,737
57
305
359

I tried the 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 called it as you said, but the runTicker didn't run. Thanks for your help – Sheri Trager Nov 14 '12 at 18:21

Using JQuery Deferred and Promise

2 Answers2

→ Code at jsfiddle.net

Linked