Separate pipe() and $.Deferred.resolve()

Question

$.Deferred(function(dfr) {
    $("#container > div").each(function() {
        var $div = $(this);
        dfr = dfr.pipe(function() {
            return $div.fadeIn();
        });
    });
}).resolve();

Is there a way to load dfr separately in the above code and then pass it into $.Deferred() something like....

$("#container > div").each(function() {
            var $div = $(this);
            dfr = dfr.pipe(function() {
                return $div.fadeIn();
            });
        });

 $.Deferred(function(dfr) { }).resolve();

http://jsfiddle.net/realwork007/KgY33/25/ Similiar to this example but only thing is I will be populating the dfr seperately.

Edit: I am writing to visualize selection sort algorithms and I have 3 to 4 helper function like change backgroundOfBlock(),blink(index) and swap(from,to)

So my selection sort visualization would be like:

function selectionSort(items){

    var len = items.length, min;

    for (i=0; i < len; i++){

     blink(blocks[i]);// to show It is selected

        //set minimum to this position
        min = i;
        changebackground(blocks[i]);//show it is min
        //check the rest of the array to see if anything is smaller
        for (j=i+1; j < len; j++){
            if (items[j] < items[min]){
                min = j;
                swap(blocks[min], blocks[j]);//swap animation function
            }
        }

       .
       .
       .
       .

If I run this method all animation run at once together but I need them to run sequencially...

using any technique...

What exactly are you trying to approach? – Bergi Jun 28 '12 at 18:09 — Bergi, Jun 28 '12 at 18:09

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

0

Just a guess:

var dfr;
$("#container > div").each(function() {
    var $div = $(this);
    dfr = dfr
      ? dfr.pipe(function() {
           return $div.fadeIn().promise();
        })
      : $div.fadeIn().promise();
});

dfr.done(alert.bind(window, "All divs faded In"));

You don't seem to need a newly constructed Deferred, if you just want to resolve it right away. Just use the first promise you get. If you don't want that, you can also do this:

var first = new $.Deferred,
    curDfr = first;
function blink($el) {
    curDfr = curDfr.pipe(function() {
        return $el.animate("background-color", "red").animate("background-color", "transparent").promise();
    });
}

// now you can use blink() in your algorithm
// and the animation will be executed when all piped deferreds before
// have been resolved

first.resolve(); // you can move this where you want
curDfr.done(/* when everything happened */);

So, you will come down with one global variable holding a deferred, and at any time you want to add an animation replace it with the new piped promise. This will not only work with fadeIn as we both demonstrated, but also with changeBackground, blink or swap.

You might also have a look at .queue(), which might be more appropriate for animations than deferreds.

edited May 23 '17 at 12:04

Community

1
1

answered Jun 28 '12 at 18:13

Bergi

630,263
148
957
1,375

Please look at the edit I added a example of where I am exactly struck. Thanks – Ajax3.14 Jun 28 '12 at 18:29
OK, and why don't you just use the working code you already have? Or is it about porting the synchronous loops etc? – Bergi Jun 28 '12 at 19:51
The problem with the current code is that all animation happen at once. Say the thread calls the blink(). it do not wait till blink() completes its animation but proceeds to executing the next statement. So in the end what i see is, all blocks changed color and blinks once together. It should be one by one so I trying out deferred and resolve. – Ajax3.14 Jun 28 '12 at 20:08
Yes, but your fadeIn-code alrady works. What's the problem applying this solution to your algorithm? – Bergi Jun 28 '12 at 20:12
OK, the Working fadein code is not mine I found it in http://blog.darkthread.net/post-2011-08-03-deferred-pipe-animation.aspx .But I wanted to tweak it so that I can use it in my selectionSort() to enable sequential animation. Sorry If I was not clear before. – Ajax3.14 Jun 28 '12 at 20:19
Ahh... You might have mentioned that. But you do understand the concept of Deferreds/Promises? – Bergi Jun 28 '12 at 20:34

Separate pipe() and $.Deferred.resolve()

1 Answers1