2013-11-21 50 views
13

同期関数と非同期関数を特定の順序で実行したい場合は、jQueryの約束を使用することができますが、作業。jQuery遅延と同期と非同期関数の順次実行のための約束

deferred.resolve()が呼び出されたときに関数a、b、およびcがこの順番で実行される必要があります。関数bが実行されると思われますが、解決が呼び出されてもすべての関数が直ちに実行されます。ここ

コードは次のとおり

function a(){ 
    var deferred = $.Deferred(); 
    setTimeout(function(){ 
    console.log("status in a:",deferred.state()); 
    //this should trigger calling a or not? 
    deferred.resolve("from a"); 
    },200); 
    console.log("a"); 
    return deferred.promise(); 
}; 
function b(){ 
    var deferred = $.Deferred(); 
    setTimeout(function(){ 
    console.log("status in b:",deferred.state()); 
    deferred.resolve("from b"); 
    },200); 
    console.log("b"); 
    return deferred.promise(); 
} 
//synchronous function 
function c(){ 
    var deferred = $.Deferred(); 
    console.log("c"); 
    console.log("status in c:",deferred.state()); 
    deferred.resolve("from c"); 
    return deferred.promise(); 
} 
function test(){ 
    fn=[a,b,c],i=-1, 
    len = fn.length,d, 
    d = jQuery.Deferred(), 
    p=d.promise(); 
    while(++i<len){ 
    p=p.then(fn[i]); 
    } 
    p.then(function(){ 
    console.log("done"); 
    }, 
    function(){ 
    console.log("Failed"); 
    }); 
    d.resolve(); 
    //instead of the loop doing the following has the same output 
    //p.then(a).then(b).then(c); 
    //d.resolve(); 
} 
test(); 

出力は:

a 
b 
status in c: pending 
c 
done 
status in a: pending 
status in b: pending 

期待出力:

a 
status in a: pending 
b 
status in b: pending 
c 
status in c: pending 
done 

は、以下の修飾のいくつかの組み合わせを試みた:

d = jQuery.Deferred(); 
    setTimeout(function(){d.resolve();},100); 
    var p=d.promise(); 
    while(++i<len){ 
    p.then(fn[i]); 
    } 

しかし、すべて予期しない同じ結果を伴い、bはaの遅延が解決される前に呼び出され、cはbの遅延が解決される前に呼び出されます。

前1.8へのjQueryのために

答えて

9

、これは問題ですが、jQueryの新しいバージョンのために、これはもはや問題ではありません。

以下
function test(){ 
    var d = jQuery.Deferred(), 
    p=d.promise(); 
    //You can chain jQuery promises using .then 
    p.then(a).then(b).then(c); 
    d.resolve(); 
} 
test(); 

DEMO

のjQuery 1.7.2のデモです

DEMO

+1

jQuery 1.7.2(拡張jqネイティブコードを使用)で動作するようにするにはhttp://jsfiddle.net/L5nud/2/ –

+1

jQuery <1.8は良いWRTチェーンです.pipeを使用してください.thenの代わりに。 1.8は単純に変更され、その後は.pipeになります。 – Esailija

+0

'a'関数が' b'関数を使用する値を返すなど、それを使用する方法。 –

2

jQueryの< 1.8は、あなただけの.pipeの代わりに01を使用し、細かいWRT連鎖であります。 1.8は単に.then.pipeに変更しました。

1

サイドノート:配列なしで使用すると、約束事から始める必要はありません。 $.when({}).then(a).then(b)はうまくいくでしょう。 whenの中にaを入れないようにするだけです。

関連する問題