【ajax】ajax通信の処理を含むクリックイベントが並列処理されてしまう

JavaScriptでの処理における質問です。

期待する動作

ボタンをクリック
クリックイベントが発動
すぐにローディング画面が表示され複数回のクリック(ajax通信)を防止
ajax通信による処理
処理終了後ローディング画面を非表示にする

予想外に起きていること

上記動作のため次のように書いた(詳細は省きます。今回は流れのみ)

// ajax通信
var ajax = function(){
    $.ajax({
          type: 'POST',
          data: {
          ...
          },
    })
    .done(function() {
       stoploading(); // ローディング画面非表示
　　 });
}

//クリックイベント
$(#button).on("click",function(){
    loading(); // ローディング画面表示
    ajax(); 　 // ajax通信を伴う処理
});

この状況でボタンを連打すると、ajax通信は複数回行われた。

試したこと

・ajax通信のオプションでasync:falseを追記
→ボタン連打してもajax通信は一度だけとなった

考えられること

クリックイベント自体が非同期処理となってしまっている

皆様にお願いしたいこと

ボタンを連打するとクリックイベントが並列して処理される現状から、期待する動作へと改善したいです。
ajax通信のオプションでasync:falseを追記すると問題はなくなりますが、webコンソールに警告が出力されるため、別で解決する方法を探しています。
もしご存知でしたら教えていただきたいです。
よろしくお願いいたします。

追記

https://teratail.com/questions/24000?link=qa_related_pc
こちらに同じような質問がございました。
やはり、ボタンクリック時にボタンの機能を無くしてしまい、ajax通信に.always()等を繋げてこの中にそのボタンの機能を復活させるという方法が良いのでしょうか。