ダメ元エンジニアのお勉強おメモ

ほとんど自分用のメモです。AWS をよく触ります。Web アプリとか作ります。Raspberry Pi も好きです。

【jQuery】deferred done / always の実行順序

jQueryのdeferredやら$.ajaxのコールバックとして指定する、
done(or fail) と always の実行順序を明確にする必要があったためメモる。


【環境】
jQuery: 3.3.1
Chrome: 72.0.3626.109


【結論】
先に指定した方が勝つみたい。要するにFIFO
以下のように書けば、done → always の順序だし、

$.ajax({
  ...
}).done(() => {
  console.log('Done!');
}).always(() => {
  console.log('Always!');
});


逆してあげれば、always → done の順序になる。

$.ajax({
  ...
}).always(() => {
  console.log('Always!');
}).done(() => {
  console.log('Done!');
});


【実験】
done → always パターン、 always → done パターンを試してみる。
一応キャッシュされないような設定もしておく。
※ キャッシュ無しの連投リクエストなので、何度もやらない

done → always パターン

let opt = {
  url: 'https://httpbin.org/ip',
  type: 'GET',
  dataType: 'json',
  cache: false,
  beforeSend: xhr => {
    xhr.setRequestHeader('If-Modified-Since', 'Thu, 01 Jun 1970 00:00:00 GMT');
  }
};

console.log('done → always');
for (let i=1; i<=5; i++) {
  $.ajax(opt)
    .done(() => {
      console.log('Done ' + i);
    }).always(() => {
      console.log('Always ' + i);
    });
}


結果。
リクエスト自体は非同期だけど、done → alwaysの順序通り。

done → always
Done 3
Always 3
Done 5
Always 5
Done 1
Always 1
Done 4
Always 4
Done 2
Always 2


always → done パターン

console.log('always → done');
for (let i=1; i<=5; i++) {
  $.ajax(opt)
    .always(() => {
      console.log('Always' + i);
    }).done(() => {
      console.log('Done' + i);
    });
  }


結果。
always → doneの順序ですな!

always → done
Always 1
Done 1
Always 4
Done 4
Always 2
Done 2
Always 3
Done 3
Always 5
Done 5


【参考】
stackoverflow.com
d.hatena.ne.jp