Question

我想在完成之前的更改方法之后调用一个change（）方法，如下所示：

$('#editMPS_structure .alcanceMarca').find('.marca').val(enlaceMarca).change();
$('#editMPS_structure .alcanceProducto').find('.producto').change();


$('.marca').on('change', function() {
    $.ajax({ //ajax call to populate .producto select according a value of marca })
})

$('.producto').on('change', function() {
    $.ajax({ //ajax call})
})

但问题是调用.alcanceProducto的第二个change（）方法而没有完成第一个change（）方法，我需要在完成第一个change（）之后调用第二个change（）。

我不希望在第一个ajax change（）内部第二次调用change（），但我认为存在另外的方法或函数来执行此操作。

Answer 1

您没有多少选择（取决于要求和代码复杂性）。首先，更天真：

让我们为async请求设置false到ajax()，在第一个请求完成之前，下一行代码将不会被执行（但您的页面也不会刷新）。
让第二个调用放在第一个调用的回调（或其中一个jQuery助手方法）中（所以它会在第一个调用结束时执行）。
让我们使用jQuery的when函数（它模仿你可以手工编写的请求链）。

如果您的代码路径不是那么直接和/或您必须处理更棘手的情况（例如，当用户操作可能启动多个请求时），您必须创建自己的列表。

每个on('change')处理程序都不会启动请求，但它会将它放入FIFO然后它会弹出第一个条目并执行该条目。在回调函数中，它将弹出下一个（如果多个请求已排队，则依此类推）。您可以从this link开始作为工作示例。

Answer 2

我首先要按照以下方式为你的ajax调用创建函数：

function ajax1(endFunc){
    $.ajax({ //ajax call to populate .producto select according a value of marca })
    .done(function(){
       if(typeof endFunc === "function") 
            endFunc();
     });
}

和

function ajax2(){
     $.ajax({ //ajax call})
}

然后我会写下面的内容：

ajax1(ajax2);

而不是：

('#editMPS_structure .alcanceMarca').find('.marca').val(enlaceMarca).change();
$('#editMPS_structure .alcanceProducto').find('.producto').change();

不要忘记将新功能与onchanges链接：

$('.marca').on('change', ajax1);
$('.producto').on('change', ajax2);

那将是我的解决方案。不幸的是我现在无法测试它，但我认为它应该可行。让我知道！

Answer 3

只需在变量中保存从ajax调用返回的延迟，并在其上调用done（）以查看是否已完成：

var ajax = $.ajax(); // avoids calling done() on undefined

$('.marca').on('change', function() {
    ajax = $.ajax({
        url: 'something'
    }).done(function(data) {
        console.log('first'); // will always complete before the next one
    });
});

$('.producto').on('change', function() {
    ajax.done(function() {
        $.ajax({
            url: 'something'
        }).done(function(data) {
            console.log('second'); // will always complete after the first one
        });
    });
});

FIDDLE

Answer 4

在.producto上保持change事件的设置，直到第一个ajax调用的响应完成为止

$('.marca').on('change', function() {
    $.ajax({ //.... })
      .done(function() { 
        $('.producto').on('change', function() {
          $.ajax({ //ajax call})

等待完成先前执行的方法更改以执行另一个

4 个答案: