jQuery Deferredのサンプル

app1.ts

// thenメソッド（doneFilter）を使うと、
// resolveされたときにフィルタできる
$(() => {
	const deferred = $.Deferred<number>();

	deferred.promise().then(value => {
		// resolveメソッドに渡した引数をコールバックで取得できる
		console.log(`then: ${value}`);

		return value * value;
	}).done(value => {
		// thenコールバック内で返した戻り値をコールバックで取得できる
		console.log(`done: ${value}`);
	});

	console.log("resolve");
	deferred.resolve(2);
	console.log("resolved");

// 実行結果
// resolve
// resolved
// then: 2
// done: 4
});

app2.ts

// thenメソッド（doneFilter）内でpromiseやdeferredオブジェクトを返すと、
// resolveされたときの処理を連鎖できる
$(() => {
	const start = Date.now();

	// 経過時間とともにログ出力
	const log = (message: string) => {
		const elapsed = Date.now() - start;
		console.log(`${elapsed} ${message}`);
	};

	const outer = $.Deferred<string>();

	outer.promise().then(value => {
		log(`outer then: ${value}`);

		const inner = $.Deferred();

		inner.promise().done(value2 => {
			log(`inner done: ${value2}`);
		});

		// 3秒後にinnerをresolveする
		setTimeout(() => {
			log("inner resolve");
			inner.resolve("y");
			log("inner resolved");
		}, 3000);

		return inner;
	}).done(value => {
		log(`outer done: ${value}`);
	});

	// outerをresolveする
	log("outer resolve");
	outer.resolve("x");
	log("outer resolved");

// 実行結果
// 0 outer resolve
// 1 outer resolved
// 8 outer then: x
// 3009 inner resolve
// 3009 inner done: y
// 3009 inner resolved
// 3011 outer done: y
});