Skip to content

Instantly share code, notes, and snippets.

@takkyuuplayer
Created February 1, 2013 09:27
Show Gist options
  • Save takkyuuplayer/4690322 to your computer and use it in GitHub Desktop.
Save takkyuuplayer/4690322 to your computer and use it in GitHub Desktop.
jQuery.Deferred examples.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
</head>
<body>
<ul id="async_test">
<li>0</li>
</ul>
<script language="javascript">
var time_ms = 1000;
var ajax = function(arg) {
var deferred = $.Deferred();
setTimeout(function() {
deferred.resolve(arg+1);
}, time_ms);
return deferred.promise();
}
var tmpl = _.template('<li><%= count %> : <%= wait %>ms later</li>');
ajax(0).done(function(ret) {
$('ul#async_test').append(tmpl({count:ret, wait:time_ms}));
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
</head>
<body>
<ul id="async_test">
<li>0</li>
</ul>
<script language="javascript">
var time_ms = 1000;
var ajax = function(arg) {
var deferred = $.Deferred();
setTimeout(function() {
deferred.resolve(arg+1);
}, time_ms);
return deferred.promise();
}
var tmpl = _.template('<li><%= count1 %> / <%= count2 %> </li>');
$.when(ajax(0), ajax(100)).done(function(ret1, ret2) {
$('ul#async_test').append(tmpl({count1:ret1, count2:ret2}));
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
</head>
<body>
<ul id="async_test">
<li>0</li>
</ul>
<script language="javascript">
var time_ms = 1000;
var ajax = function(arg) {
var deferred = $.Deferred();
setTimeout(function() {
deferred.resolve(arg+1);
}, time_ms);
return deferred.promise();
}
var deferreds = [];
for (var i=0; i<20; i++) {
deferreds.push(ajax(i*10));
}
var tmpl = _.template('<li><%= text %></li>');
$.when.apply(null, deferreds).done(function() {
var rets = Array.prototype.slice.call(arguments);
$('ul#async_test').append(tmpl({text:rets.join(' / ')}));
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
</head>
<body>
<ul id="async_test">
<li>0</li>
</ul>
<script language="javascript">
var time_ms = 1000;
var ajax = function(arg) {
var deferred = $.Deferred();
setTimeout(function() {
deferred.resolve(arg+1);
}, time_ms);
return deferred.promise();
}
var deferreds = [];
var max = 20;
for (var i=0; i<max; i++) {
deferreds.push(function(arg) { return ajax(arg*10); });
}
var rets = [];
var do_next = function() {
if(deferreds.length == 0 ) {
var tmpl = _.template('<li>Finished</li>');
$('ul#async_test').append(tmpl({text:rets.join(' / ')}));
return;
}
var arg = max - deferreds.length;
var deferred = deferreds.shift();
deferred(arg).done(function(ret) {
rets.push(ret);
var tmpl = _.template('<li>Process : <%= text %></li>');
$('ul#async_test').append(tmpl({text:rets.join(' / ')}));
do_next();
});
};
do_next();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment