読者です 読者をやめる 読者になる 読者になる

唯物是真 @Scaled_Wurm

プログラミング(主にPython2.7)とか機械学習とか

jQueryのDeferredオブジェクトを使ってみた

javascript chrome

Chrome拡張を作っているとchrome.extension.sendRequest()によるbackground pageとの通信の結果を利用して動作させることがよくあります.
しかしコールバック関数による非同期処理がいくつもある場合には,以下のようにネストが深くなったり順番を考えないといけなくなったり色々とめんどくさくなります.

chrome.extension.sendRequest({type:'A'}, function(responseA) {
    someProcessA(responseA);
    chrome.extension.sendRequest({type:'B'}, function(responseB) {
        someProcessB(responseA, responseB);
    });
});

こういった問題を解決するためにjQueryのDeferredオブジェクトを使ってみました.
Deferredオブジェクトは非同期処理の終了を示すための関数(resolveやrejectなど)と非同期処理の終了後にコールバックされる関数を登録されるためのメソッド(doneやfailなど)があり以下のように使用することができます.

var dfdA = $.Deferred();
var dfdB = $.Deferred();
chrome.extension.sendRequest({type:'A'}, function(response) {
    dfdA.resolve(responseA);
});
chrome.extension.sendRequest({type:'B'}, function(response) {
    dfdB.resolve(responseB);
});
$.when(dfdA, dfdB).done(function(responseA, responseB) {
    someProcessA(responseA);
    someProcessB(responseA, responseB);
});

2つの非同期処理の待ち合わせがわかりやすく書くことができたような気がします.
ただ,この例ぐらいだと通常通りネストして書いたほうがよいかもしれませんね…….

-->