【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