23
25

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

jQueryの$.Deferred、$.whenの使い方を整理してみました

Last updated at Posted at 2015-06-25

##$.Deferred

var d = new $.Deferred();
//何かしらの非同期処理
return d.promise();

このようにプロミスオブジェクトを返してあげることで、関数同士をthenでつなぐことが出来る。
$.getなどの処理が終わった後はd.resolve()で次の関数に処理が移動する。

##$.when

複数のスレッドの処理が終わるのをまって何か処理を書きたい時に使用する。
得てしてスレッドは可変である場合が多いので、$.when.apply($,arr);と、applyメソッドを使ってあげると便利。
プロミスオブジェクトを返す

var defarr = [];
ajaxs.forEach(function(){
	defarr.push(d.promise());
	//何かしらの非同期処理
});
return $.when.apply($,defarr);

##サンプル

5秒待って、ajaxsに格納されたURLから複数jsonを取得して、"everything is done"というメッセージを出す


//配列ajaxsには予めURLが複数格納されているものとする

var wait = function(){
	var d = new $.Deferred();
	setTimeout(function(){
		d.resolve();
	},5000);
	return d.promise();
}

var getObjs = function(){
	var defarr = [];
	ajaxs.forEach(function(url){
		var d = new $.Deferred();
		$.getJSON(url,function(json){
			items.push(json);
			d.resolve();
		});
		defarr.push(d.promise());
	});
	return $.when.apply($,defarr);
}

var message = function(){
	console.log("everything is done");
}

wait().then(getObjs).then(message);

23
25
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
23
25

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?