鍍金池/ 問答/HTML/ 讀jquery技術(shù)內(nèi)幕（jquery1.7版本）遇到的問題

讀jquery技術(shù)內(nèi)幕（jquery1.7版本）遇到的問題

<script src="jquery.js"></script>
<script>
function fn1(args){console.log('fn1',args);}
function fn2(args){console.log('fn2',args);}
var defer=$.Deferred(),
    filtered=defer.pipe(function(value){return value*2;});
defer.done(fn1);
filtered.done(fn2);
defer.resolve(5);
/*輸出
fn2 10
fn1 5
*/
</script>

為什么是先執(zhí)行fn2再執(zhí)行fn1？

回答
編輯回答
嘟尛嘴

在執(zhí)行filtered=defer.pipe(function(value){return value*2;});的時候，會返回$.Deferred(fn).promise();$.Deferred(fn)中的fn會在$.Deferred()結(jié)束之前執(zhí)行，pipe方法中的$.Deferred(fn)的fn會執(zhí)行deferred.done(匿名函數(shù)。。。)，這個匿名函數(shù)負(fù)責(zé)執(zhí)行pipe方法返回的新的異步隊列，要先于defer.done(fn1);所以先執(zhí)行匿名函數(shù)匿名函數(shù)執(zhí)行fn2，最后執(zhí)行fn1。表達(dá)能力不是很好，所以說的不是很清楚orz。。。

2017年10月1日 22:20
編輯回答
憶當(dāng)年

感覺說的有點亂，其實總結(jié)就是，在 defer.resolve(5) 之前，并沒有任何函數(shù)被執(zhí)行，它們只是在定義 什么時候干什么事， 如果你能理解這一點，下邊這些你應(yīng)該就不會覺得亂了。

我沒有怎么學(xué)習(xí)過 jQuery， 但是看這個 API，應(yīng)該是這樣的：

filtered = defer.pipe(v => v * 2) 這里為 defer 定義了一個流水線任務(wù)(即 pipe，這個東西有很多翻譯，我習(xí)慣理解成流水線，pipe 多數(shù)情況下是允許你不停疊加任務(wù)的)；

defer.done(fn1) 是為 defer 定義了：當(dāng)前邊 pipe里所有的任務(wù)都執(zhí)行完后，執(zhí)行fn1。

filtered.done(fn2) 是說 filtered 本身執(zhí)行完后執(zhí)行 fn2。

defer.resolve(5) 從此時開始，表明對 defer (和 defer 上定義的一系列 pipe 任務(wù))已經(jīng)定義完成，開始執(zhí)行。

所以你可以看到輸出時是這樣的：

defer.resolve(5)
// 開始執(zhí)行 defer
// 因為前邊定義了 filtered = derfer.pipe(v => v * 2)，所以要先把流水線上的任務(wù)執(zhí)行完
// 也就是說 filtered 會拿到一個10作為參數(shù)
// filtered.done 就是通知你 filtered 本身的事情做完了，相當(dāng)于一個事件回調(diào)。
fn2(10) // 這個 10 就是 defer.pipe 里那個函數(shù)的結(jié)果
//filtered 全部事情都完成了，現(xiàn)在就繼續(xù)回到 defer 的任務(wù)上
// defer 的任務(wù)除了 filtered 就沒了，那么就執(zhí)行 defer.done
// 而 v => v * 2 是 filtered 時所執(zhí)行的操作，所以此時 defer 手上的不是10而仍然是5
fn1(5)
2017年10月27日 14:55