Deferredその５：when()を使用して、複数の非同期処理を並列処理
when()を使用して、複数の非同期処理を並列処理
Deferredによる.when()を使う事により並列処理が可能です。
when()を使用して、複数の非同期処理を並列処理の書式
$.when(
Deferredその１,
Deferredその２,
Deferredその３,
[以下続く…]
)
.コールバック(
function(
受取り値その１,
受取り値その２,
受取り値その３,
[以下続く…]
){
処理;
});
特に.ajax()等の場合は時間が掛かるので、複数処理の場合はタイムラグよるズレが生じる場合があります。
この様な時に、when()を使用して、複数の非同期処理を並列処理をすると非常に便利です。
when()を使用して、複数の非同期処理を並列処理のサンプル
例によってjQueryのサンプルコードを書きましたので、それを見ながら並列処理の流れを見ていきましょう。
リクエストのパラメーターの値の分、スリープするテスト用のPHP
１．受け取るパラメータには"sleep_sec"があり、この値の分、sleep関数にてスリープします。
２．極端に大きい値を受け取ると、ずっとスリープ処理をし続けてしまうので、バリデートを掛けてます。
３．スリープ後にメッセージを出力します。
test-deferred-when.php
// ※これはhtmlではなくphpファイルです、<?phpと?>で囲んでください
// ※またこのコードをテストする場合は＆の部分を半角にしてください
$sleep_sec = $_SERVER["REQUEST_METHOD"] == "GET" ? $_GET["sleep_sec"] : $_POST["sleep_sec"] ;
if($sleep_sec >= 0 ＆＆ $sleep_sec <= 60){
sleep($sleep_sec);
echo "リクエスト先のphpでsleep()を" . $sleep_sec . "秒しました。";
}else{
header("HTTP/1.1 400 Bad Request");
}
when()による並列処理のjQueryサンプルコード
１．getAjaxPromise()はリクエスト先phpに渡すパラメータ(スリープ秒)の引数がある
２．.ajax()によりリクエストされたphpはパラメーターの値の分、スリープしてメッセージを出力する。
３．スリープ秒をばらばらにして５回ほどgetAjaxPromise()を実行する。
４．５個のDeferred処理について、when()による並列処理をする。
５．５個のDeferred処理で一番時間の掛かるのが10秒のスリープなので、10秒後に５個分の結果の出力がliタグに一斉に追加される
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style type="text/css">
<!--
div {border: 1px solid black;}
-->
</style>
<script src="../../js/jquery-1.12.2.min.js"></script>
<script>
$(function(){
function getAjaxPromise(sleep_sec){
// Deferredオブジェクト作成
var defer = new $.Deferred;
$.ajax({
url: "test-deferred-when.php",
data: "sleep_sec=" + sleep_sec,
success: function(data) {
// Deferredの状態をresolveとする。
// これによりコールバック関数は.done()となる。
defer.resolve(data);
},
error: function(jqXHR, textStatus, errorThrown) {
// Deferredの状態をrejectとする。
// これによりコールバック関数は.fail()となる。
defer.reject(jqXHR, textStatus, errorThrown);
}
});
return defer.promise();
}
$.when(
getAjaxPromise(5),
getAjaxPromise(10),
getAjaxPromise(3),
getAjaxPromise(4),
getAjaxPromise(8))
.done(function(data_1, data_2, data_3, data_4, data_5){
$("ul").append("<li>" + data_1 + "</li>");
$("ul").append("<li>" + data_2 + "</li>");
$("ul").append("<li>" + data_3 + "</li>");
$("ul").append("<li>" + data_4 + "</li>");
$("ul").append("<li>" + data_5 + "</li>");
});
});
</script>
</head>
<body>
<ul>
</ul>
</body>
</html>
when()による並列処理のjQueryサンプルの結果
9秒後まで
そして10秒後
