jQuery で遊ぶ (イベント処理の終了を待つ)

jQueryを使用して、selectエレメントのchangeイベントを登録するには次のようなコードになると思います。

  $('#id').change(function() {
    $.ajax({
      url: '/Target/URL',
      type: 'POST',
      data: {
        'item': 'value',
      },
      dataType: 'json',
      success: function(data, dataType) {
        alert('通信成功');
      },
      error: function() {
        alert('通信失敗');
      },
      complete: function() {
        alert('処理終了');
      }
    });
  });

これをloadイベントで処理するように$(document).ready()を使って、

$(document).ready(function(){
  $('#id').change(function() {
      :
  });
});

のようにすることでしょう。
さらに、loadイベントの終盤でselectエレメントのchangeイベントを実行して初期化処理とすることもあると思います。
この初期化処理の時にのみ、「処理終了」のダイアログボックスが閉じた後に何か処理を行いたい場合はどのようにしたら良いでしょうか？
ご存じの通り$.ajax()は、非同期処理です。同期処理として使用することもできますが、あくまでも非同期処理のまま使用することが目的です。
そこでasyncとawaitを使用します。
async宣言された関数内で、await指定して関数をコールすると、非同期処理の終了を待って、次のコードが実行されるようになります。
筆者の場合、次のようなコードに落ち着きました。
使用したjQueryのバージョンは、3.4.1です。

$(document).ready(function(){
  $('#id').change(async function() {
    await $.ajax({
      url: '/Target/URL',
      type: 'POST',
      data: {
        'item': 'value',
      },
      dataType: 'json',
      success: function(data, dataType) {
        alert('通信成功');
      },
      error: function() {
        alert('通信失敗');
      },
      complete: function() {
        alert('処理終了');
      }
    });
  });
  const afterprocess = async function() {
    await Promise.all([
      $('#id').change()
    ]);
    alert('初期化完了');
  }
  // Perform processing after screen loading
  afterprocess();
});

筆者は非同期処理を正しく理解しておりませんので、これが正しいコードである自信がありません。
間違いなどご指摘いただければ幸いです。

参考サイト

async/await、promise・・これが最後の「JavaScriptの非同期処理完全に理解した」