javascript - Ajax が完了する前に関数が戻る

Question

サブミット イベントが ajax 呼び出しを待たずに完了することがあるという問題があります。ここで何が起こっているのか本当にわかりません。待機しているように見えることもあり、成功と完了のメッセージが表示されることもあれば、待機せずに送信アクションを起動して次のページをロードすることもあります。

function SetUpAjax() {
    $.ajaxSetup({
        data: "{}",
        dataType: "json",
        type: "POST",
        contentType: "application/json"
    });
}

function SaveBooking(booking) {
    $.ajax({
        url: HOST + "api/SaveBooking",

        data: JSON.stringify({
            booking: booking
        }),
        success: function(resdata) {
            alert("SaveBooking Saved")
        }
    });
}

$(document).ready(function() {
    SetUpAjax();
});



function Generate() {
    if ($('#addbookingaction').valid()) {

        try {
            var booking = GetBookingFromForm()
        } catch (err) {
            alert("error" + err)
            return false
        }

        $.when(SaveBooking(booking)).done(function(data, textStatus, jqXHR) {
            alert("Booking Saved")
            return true
        }).fail(function(data) {
            alert("Save Booking failed")
            return false
        })
    } else {
        return false;
    }
}

// Pug html
input(type = "submit", id = "save", name = "save", value = "Save", onclick = "return Generate()")

私の理解では、「いつ」の呼び出しは、SaveBooking ajax 関数が true または false を返す前に完了するまで待機する必要があります。ただし、Ajax が実行される前に Generate 関数が true を返すことがあるように思われるため、「保存済み」アラートは表示されません。サーバーの応答を確認すると、常に応答成功です。

Generate 関数の最後に return false を配置すると、常に「保存済み」アラートが表示されますが、onclick イベントが false を返すため、ページは終了しません。

ここで気が狂いそうです。動作に一貫性がない理由がわかりません (おそらく競合状態ですか?)。誰でも助けになれますか？