单独的pipe()和$ .Deferred.resolve()

时间:2012-06-28 18:01:13

标签: javascript jquery jquery-animate jquery-chaining

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

有没有办法在上面的代码中单独加载dfr,然后将它传递给$ .Deferred()......就像....

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

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

http://jsfiddle.net/realwork007/KgY33/25/与这个例子类似,但唯一的事情就是我将单独填充dfr。

编辑:我正在编写可视化选择排序算法,我有3到4个辅助函数,如更改backgroundOfBlock(),blink(索引)和交换(从,到)

所以我的选择排序可视化就像:

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

       .
       .
       .
       .

如果我运行此方法,所有动画一起运行,但我需要它们以顺序运行...

使用任何技术......

1 个答案:

答案 0 :(得分:0)

只是一个猜测:

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

如果您只是想立即解决它,您似乎不需要新构建的Deferred。只需使用您获得的第一个promise即可。如果您不想这样做,您也可以这样做:

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

所以,你会得到一个持有延迟的全局变量,并且在任何时候你想要添加一个动画,用新的管道承诺替换它。这不仅适用于我们演示的fadeIn,也适用于changeBackgroundblinkswap

您可能还have a look .queue(),这可能更适合动画而不是延迟。