JavaScript
jQuery
Deferred

【超便利!】jQueryを使った直列処理のやり方

やりたいこと

処理Aと処理Bと処理Cを順番に実行したい

例えば以下のような3つの処理があったとして、
↓↓↓

myApp.js
function execA() {
    setTimeout(function() {
        console.log('処理A');
    }, 2000);
}
function execB() {
    setTimeout(function() {
        console.log('処理B');
    }, 1000);
}
function execC() {
    setTimeout(function() {
        console.log('処理C');
    }, 4000);
}

これらを順番に実行していくと、
↓↓↓

myApp.js
execA();
execB();
execC();

結果は、
↓↓↓

// 処理B
// 処理A
// 処理C

こうなります。処理Aから処理CはsetTimeout()を使って、それぞれの処理開始をずらしているので、このような結果になっています。そこで今回のやりたいこと、「処理Aと処理Bと処理Cを順番に実行したい」を実現していきたいと思います。

やり方

jQueryのDeferredオブジェクトを使って実現していきます。
まずは、処理Aから処理CをDeferredオブジェクトを使った以下のような形に修正します。

myApp.js
function execA() {
    var def = $.Deferred();         // 追加
    setTimeout(function() {
        console.log('処理A');
        def.resolve();              // 追加
    }, 2000);
    return def.promise();           // 追加
}
function execB() {
    var def = $.Deferred();         // 追加
    setTimeout(function() {
        console.log('処理B');
        def.resolve();              // 追加
    }, 1000);
    return def.promise();           // 追加
}
function execC() {
    var def = $.Deferred();         // 追加
    setTimeout(function() {
        console.log('処理C');
        def.resolve();              // 追加
    }, 4000);
    return def.promise();           // 追加
}

ここで各処理に加えた3つの修正点について簡単に説明していきます。
↓↓↓

  1. var def = $.Deferred();
    • ローカルスコープにDeferredオブジェクトを定義しています。このオブジェクトを使って今後の処理の制御を行なっていきますので、これがないと始まりません。
  2. def.resolve();
    • 処理が正常終了したことを意味します。処理が異常終了したことを意味するreject()もあります。
  3. return def.promise();
    • Deferredオブジェクトからresolve()やreject()を取り除いたPromiseオブジェクトというものを返しています。returnした先でまたresolve()やreject()を使って結果を書き換えられたくない為、このようなオブジェクトが用意されています。

では準備が整ったので、実際に直列処理を実行してみたいと思います。直列処理の書き方はこんな感じ。
↓↓↓

myApp.js
execA()
    .then(execB)
    .then(execC);

では実際に実行してみましょう。
気になる結果は、
↓↓↓

// 処理A
// 処理B
// 処理C

出来ました!
遅らせている秒数に関係なく、順番通りにABCの順番で処理が実行されることが確認出来ました。とにかく便利なので、ここぞという時には是非使ってみてください。

最後まで見て頂き、ありがとうございます。