Javascript JQuery事件正被另一个事件取代

我有一种形式，它实际上由两种形式组成。每张表格都是预订表格。两种形式都有两个下拉列表-

目的地自

和

目的地至

。有一个偶数处理程序，当选择/更改目的地时，它调用AJAX将可能的

目的地转换为

另一个事件处理程序（往返复选框）通过从第一个表单切换目标来填充第二个表单下拉列表

因此，如果第一种形式有：

destination one: France
destination two: Austria

然后，如果勾选了往返，则立即填写第二张表格：

destination one: Austria
destination two: France 

问题是这两个事件没有正确地配合

执行此代码时：

id_form_1_destination_from.val(destination_to_0.val());
id_form_1_destination_to.val(destination_from_0.val());
id_form_1_destination_from.change();
id_form_1_destination_to.change();

第一行调用另一个处理程序来填充第二个表单（这是唯一不需要的情况）。因为它是

AJAX

，第二行超过了这个

AJAX

，所以现在，第二个表单被正确填写（从第一个表单切换到了目的地），但是当AJAX完成时，它会更改

目的地2

字段的选择

有没有办法避免这种情况？例如，要关闭事件处理程序，或者最好让

JQuery

等待

AJAX

完成，然后继续。我不能只做

.off（）

打开

目的地到

字段，因为我使用

选择2

插件

这是我的

JQuery

：

$(document).ready(function () {
    var destination_from_0 = $("#id_form-0-destination_from");
    var destination_to_0 = $('#id_form-0-destination_to');
    var ride_two = $('#ride_two');

    $('.class-destination-from').on('change', function () {
        destination_from_changed.call(this);
    });

    $("#id_round_trip").on('change', function () {

        if (($('#id_round_trip').is(':checked')) ) {

            var id_form_1_destination_from =$('#id_form-1-destination_from');
            var id_form_1_destination_to = $('#id_form-1-destination_to');

            ride_two.show('fast');

            //id_form_1_destination_from.off();
            id_form_1_destination_from.val(destination_to_0.val()).change();
            //id_form_1_destination_from.on();
            //id_form_1_destination_from.change();
           id_form_1_destination_to.val(destination_from_0.val()).change();


        }else{
            ride_two.hide('fast');
            ride_two.find(':input').not(':button, :submit, :reset, :checkbox, :radio').val('').change();
            ride_two.find(':checkbox, :radio').prop('checked', false).change();
        }
    });
    $('.class-destination-to').on('change', destination_to_changed);



});

function destination_to_changed() {
    var destination_id = $(this).val();
    var arrival_container = $(this).siblings('.arrival-container');
    var departure_container = $(this).siblings('.departure-container');

    if (destination_id == '') {
        return;
    }
    $.ajax({
        url: '/ajax/is-airport/' + destination_id + '/',
        success: function (data) {
            if (data.status == true) {
                arrival_container.hide("slow");
                departure_container.show("slow");

            }
            if (data.status == false) {

                departure_container.hide("slow");
                arrival_container.show("slow");
            }
            arrival_container.change();
            departure_container.change();
        }
    })
}

function destination_from_changed() {
    var destination_id = $(this).val();
    if (destination_id == '') {
        return;
    }
    var ajax_loading_image = $('#ajax-loading-image');
    var destination_to = $(this).siblings('.class-destination-to');
    destination_to.empty();
    ajax_loading_image.show();
    $.ajax({
        url: '/ajax/get-destination-to-options/' + destination_id + '/',
        async:false, // ADDED NOW - THIS HELPED BUT IT'S NOT NECESSARY EVERYTIME
        success: function (data) {
            ajax_loading_image.hide();
            destination_to.append('<option value="" selected="selected">' + "---------" + '</option>');
            $.each(data, function (key, value) {
                destination_to.append('<option value="' + key + '">' + value + '</option>');
            });
            destination_to.change();
        }
    })
}

$（文档）.ready（函数（）{
var destination_from_0=$（“#id_form-0-destination_from”）；
var destination_to_0=$（'id_form-0-destination_to'）；
var ride_two=$（“#ride_two”）；
$（'.class destination from'）。on（'change'，function（）{
目的地更改。呼叫（此）；
});
$（“#id#往返”）。on（'change'，function（）{
如果（$（'id#u往返行程'）是（'：选中'））{
变量id_form_1_destination_from=$（“#id_form-1-destination_from”）；
变量id_form_1_destination_to=$（“#id_form-1-destination_to”）；
骑乘二号秀（“快”）；
//id_form_1_destination_from.off（）；
id_form_1_destination_from.val（destination_to_0.val（））.change（）；
//id_form_1_destination_from.on（）；
//id_form_1_destination_from.change（）；
id_form_1_destination_to.val（destination_from_0.val（））.change（）；
}否则{
骑二。藏起来（“快”）；
二.查找（':input'）.not（':button，：submit，：reset，：checkbox，：radio'）.val（'.change（）；
ride_two.find（'：checkbox，：radio'）.prop（'checked'，false）.change（）；
}
});
$（'.class destination to'）。on（'change'，destination_to_changed）；
});
函数目标_到_已更改（）{
var destination_id=$（this.val（）；
var-arrival_-container=$（this.sippiners（'.arrival-container'）；
var deposition_container=$（this）.sibbines（'.deposition container'）；
如果（目的地标识=“”）{
返回；
}
$.ajax({
url:'/ajax/is airport/'+destination_id+'/'，
成功：功能（数据）{
如果（data.status==true）{
到货集装箱隐藏（“慢”）；
离港集装箱显示（“慢”）；
}
如果（data.status==false）{
离开集装箱隐藏（“慢”）；
到货集装箱显示（“慢”）；
}
到达_集装箱。更改（）；
离开集装箱。更改（）；
}
})
}
函数目标\u从\u更改（）{
var destination_id=$（this.val（）；
如果（目的地标识=“”）{
返回；
}
var ajax_loading_image=$（“#ajax loading image”）；
var destination_to=$（this）.sidestines（'.class destination to'）；
目的地_至.empty（）；
ajax_加载_image.show（）；
$.ajax({
url:'/ajax/get destination to options/'+destination_id+'/'，
async:false，//现在添加-这有帮助，但不是每次都需要
成功：功能（数据）{
ajax_加载_image.hide（）；
目的地_to.append（“”+”-----------“+”）；
$。每个（数据、函数（键、值）{
目的地附加（“”+值+“”）；
});
目的地_to.change（）；
}
})
}

如果我理解正确，您有一个并发问题。您基本上希望在调用第二个ajax调用之前终止第一个ajax调用，对吗

我在代码中没有看到任何ajax请求，但我认为参数async:false，可能就是您所需要的

检查文档：

---

希望这对你有所帮助

你在这里肯定有一个经典的“比赛条件”

由于AJAX调用似乎彼此非常不相关，因此可能需要在JavaScript端添加一些代码，这样就不会出现潜在的“竞速”情况。例如，如果您发出了一个AJAX请求来填充一个组合，但还没有得到响应，那么您可以识别该组合正在“被填充”。您可以禁用某些按钮

---

顺便说一句，在这种情况下，当涉及两种（或更多…）形式时，我喜欢尝试集中逻辑。例如，可能有一个“singleton对象”，其工作是了解主机上或主机上正在执行的所有操作的当前状态。有限状态机（FSM）（咕哝，咕哝…）在这里工作得很好。此对象可能会广播事件以通知“侦听器”何时需要更改按钮等。

您需要在启动第二个AJAX请求之前取消第一个AJAX请求。从这个问题：

---

你能创建一个或添加一些html代码吗？嗨，谢谢你的回答，我已经在问题的底部添加了脚本的其余部分。事实上，异步有帮助，但它不是一个好主意，因为只有选中往返复选框时才需要它。理想的方法是id_form_1_destination_from.val（destination_to_0.val（））.change（）.makeajaxAsyncForHistTime（）……我很确定您可以创建bool的变量$isRoundTrip

var xhr;

function getData() {
  if (xhr) { xhr.abort(); }
  xhr = $.ajax(...);
}