【JavaScript】$.when()の使い方

$.when()メソッドは複数のオブジェクトを渡して並列で読み込んだ後に成功するとdoneメソッドを実行する。$.when()メソッドは非同期処理である。

これはどういうことかと言うと、
処理A
$.when(オブジェクト1、オブジェクト2).done(function() {});
処理B
の場合を考える。
処理Aを実行後に、$.whenメソッドはオブジェクト1とオブジェクト2の読み込みに成功するとdoneメソッドを実行する。$.whenメソッドは非同期処理であるため、オブジェクトの読み込みが早く終わる場合は、処理A→$.when()でオブジェクトを読み込む→$.when()のdone()を実行→処理Bを実行。
オブジェクトの読み込みに時間がかかってしまう場合は、処理A→$.when()でオブジェクトを読み込む→処理B→$.when()のdone()を実行。
$.when()メソッドは非同期処理なので、doneメソッドの実行が終わるまで待たずに次の処理を実行する。

console.log("test1");

$.when({
    testing: "HelloWorld"
}).done(
    function(x) {
        console.log("x.testing=" + x.testing);
        console.log("arguments[0].testing = " + arguments[0].testing);
    }
);

console.log("test2");

let jqXHRList = [];

jqXHRList[0] = {
    testing: 100
};
jqXHRList[1] = {
    testing: 200
};

jqXHRList[2] = $.ajax("./hoge00.txt");

$.when.apply(null, jqXHRList).done(
    function(x, y, z) {
        console.log("x.testing=" + x.testing);
        console.log("y.testing=" + y.testing);
        console.log("z[1]=" + z[1]);
        console.log("arguments[0].testing =" + arguments[0].testing);
        console.log("arguments[1].testing =" + arguments[1].testing);
        console.log("arguments[2][1] =" + arguments[2][1]);
    }
);

console.log("test3");

$.when.call(null, {
    testing: 123
}).done(
    function(x) {
        console.log("x.testing=" + x.testing);
        console.log("arguments[0].testing = " + arguments[0].testing);
    }
);

console.log("test4");

/*

test1
x.testing=HelloWorld
arguments[0].testing = HelloWorld
test2
test3
x.testing=123
arguments[0].testing = 123
test4
x.testing=100
y.testing=200
z[1]=success
arguments[0].testing =100
arguments[1].testing =200
arguments[2][1] =success

*/

読み込むhoge00.txtには、文字列「HelloWorld2023」が3000行書いてある。
読み込みに時間がかかるオブジェクトは簡単に作れる。

• 
• Tweet

• JavaScript