jQuery API の deferred . pipe( [doneFilter][, failFilter][, progressFilter] ) は、繰延オブジェクトを、繋げたり、フィルタリングしたりするユーティリティ・メソッド。解決時、リジェクト（拒否）時、進行状況の通知生成時に呼び出す関数を、引数に設定できる。
「jQuery Version 1.8」の時点で非推奨になった。
deferred . then( doneFilter[, failFilter][, progressFilter ] ) メソッドで代替できる。
引数
- doneFilter
繰延オブジェクトが、解決されたときに、呼び出す関数。
- failFilter
繰延オブジェクトが、リジェクト（拒否）されたときに、呼び出す関数。
- progressFilter
繰延オブジェクトが、進行状況の通知を生成するときに、呼び出す関数。
戻り値
- Promise
繰延オブジェクトのメソッドのサブセット。
記述例
filtered = deferredObject . pipe(
function( value ) {
return value + 'o(＾∇＾)oﾜｰｲ♪';
},
function( value ) {
return value + '(_ _|||)';
},
function( value ) {
return value + 'ヽ(*￣∇￣)ノ';
}
);
deferredObject . resolve( '成功しました。' );
filtered . done( function( value ) {
jQuery( '#sample' ) . text( value );
} );
idが「sample」の要素に「成功しました。o(＾∇＾)oﾜｰｲ♪」と表示する。
filtered = deferredObject . pipe(
function( value ) {
return value + 'o(＾∇＾)oﾜｰｲ♪';
},
function( value ) {
return value + '(_ _|||)';
},
function( value ) {
return value + 'ヽ(*￣∇￣)ノ';
}
);
deferredObject . reject( '失敗しました。' );
filtered . fail( function( value ) {
jQuery( '#sample' ) . text( value );
} );
idが「sample」の要素に「失敗しました。(_ _|||)」と表示する。
filtered = deferredObject . pipe(
null,
null,
function( value ) {
return value + 'ヽ(*￣∇￣)ノ';
}
);
deferredObject . notify( '頑張ってます。' );
filtered . progress( function( value ) {
jQuery( '#sample' ) . text( value );
} );
idが「sample」の要素に「頑張ってます。ヽ(*￣∇￣)ノ」と表示する。
実装例（サンプル）
実装例（サンプル）の動作について
セレクトボックスで「解決例」を選択した場合：
「実行」ボタンをクリックすると、オレンジ色のボックス要素の不透明度を25%に変更する、5秒間のアニメーションを、実行する。
アニメーション中、「実行」ボタンの右横に、「ε=ヽ(*￣∇￣)ノ 」と表示し、その左横に、0.5秒ごとに「ε=」を追加していく。5秒経過すると、「成功しました。o(＾∇＾)oﾜｰｲ♪ 」というテキストに変更する。
「実行」ボタンのテキストを「戻す」というテキストに変更する。
「戻す」ボタンを、クリックすると、元に戻す。
セレクトボックスで「リジェクト（拒否）例」を選択した場合：
「実行」ボタンをクリックすると、「実行」ボタンの右横に、「ε=ヽ(*￣∇￣)ノ 」と表示し、その左横に、0.5秒ごとに「ε=」を追加していく。2秒経過すると、「失敗しました。(_ _|||) 」というテキストに変更する。
「実行」ボタンのテキストを「戻す」というテキストに変更する。
「戻す」ボタンを、クリックすると、元に戻す。
実装例（サンプル）のソースコード
JavaScript
<!--
jQuery( function() {
jQuery( '#jquery-sample-button' ) . toggle(
function() {
var deferredObject = new jQuery . Deferred();
filtered = deferredObject . pipe(
function( value ) {
return value + 'o(＾∇＾)oﾜｰｲ♪ ';
},
function( value ) {
return value + '(_ _|||) ';
},
function( value ) {
if( value ) {
return 'ε=' + value;
} else {
return 'ε=';
}
}
);
jQuery( this ) . prop( 'disabled', true );
jQuery( '#jquery-sample select' ) . prop( 'disabled', true );
var select = jQuery( '#jquery-sample select' ) . val();
if( select == 'resolved' ) {
jQuery( '#jquery-sample-animation' ) . fadeTo( 5000, 0.25 );
setTimeout( function() {
deferredObject . resolve( '成功しました。' );
jQuery( '#jquery-sample-button' ) . text( '戻す' );
jQuery( '#jquery-sample-button' ) . prop( 'disabled', false );
}, 5000 );
} else {
setTimeout( function() {
deferredObject . reject( '失敗しました。' );
jQuery( '#jquery-sample-button' ) . text( '戻す' );
jQuery( '#jquery-sample-button' ) . prop( 'disabled', false );
}, 2000 );
}
setTimeout( function() {
deferredObject . notify( 'ヽ(*￣∇￣)ノ' );
if ( deferredObject . state() === "pending" ) {
setTimeout( function progress() {
deferredObject . notify();
setTimeout( progress, 500 );
}, 500 );
}
}, 1 );
filtered
. then(
function( status ) {
jQuery( '#jquery-sample-message' ) . text( status );
},
function( status ) {
jQuery( '#jquery-sample-message' ) . text( status );
},
function( status ) {
jQuery( '#jquery-sample-message' ) . prepend( status );
}
);
},
function() {
jQuery( '#jquery-sample-button' ) . prop( 'disabled', true );
jQuery( '#jquery-sample select' ) . prop( 'disabled', false );
jQuery( '#jquery-sample-message' ) . text( '' );
jQuery( '#jquery-sample-animation' ) . fadeTo( 500, 1 );
setTimeout( function() {
jQuery( '#jquery-sample-button' ) . text( '実行' );
jQuery( '#jquery-sample-button' ) . prop( 'disabled', false );
}, 500 );
}
);
} );
// -->
</script>
CSS
<!--
#jquery-sample {
margin: 10px;
}
#jquery-sample select {
margin: 0px 10px 0px 0px;
}
#jquery-sample-message {
margin: 0px 0px 0px 10px;
}
#jquery-sample-animation {
margin: 10px;
padding: 10px;
height: 100px;
background-color: orange;
border: 1px solid gray;
border-radius: 10px;
}
-->
</style>
HTML
<p>
<select name="deferred-state">
<option value="resolved" selected>解決例</option>
<option value="rejected">リジェクト（拒否）例</option>
</select>
<button id="jquery-sample-button">実行</button>
<span id="jquery-sample-message"></span>
</p>
<div id="jquery-sample-animation"></div>
</div>