0

我有一个问题，我的提交事件有时会在不等待 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。但是，似乎 Generate 函数有时会在 Ajax 有机会执行之前返回 true，因此我没有收到“已保存”警报。当我检查服务器响应时，它总是响应成功。

如果我将 return false 放在 Generate 函数的底部，那么我总是会收到“已保存”警报，但页面不会退出，因为 onclick 事件返回 false。

我觉得我在这里要疯了。我不明白为什么行为会不一致（也许是竞争条件？）。任何人都可以提供帮助吗？

4

0 回答 0