jquery - 延迟根本无法处理异步 Ajax 请求

Question

我有多个由 Ajax 异步请求填充的 HTML 列表。当所有这些请求都完成后（其中有很多），我需要通过选择与我的客户记录对应的列表项来填充表单。

我正在尝试使用延迟来完成此操作，但是该函数在填充列表之前很久就触发了。有任何想法吗？

$.when(
    $.ajax({
        url: "get-status.php",
        async: true,
        dataType: 'json',
        success: function (j) {
            var options = ''; 
            $.each(j, function(key, value) { 
                options += '<option value="' + key + '">' + value + '</option>';
            });     
            $("select#status_id").html(options);                
        }
    }),
    $.ajax({
        url: "get-groups.php",
        async: true,
        dataType: 'json',
        success: function (j) {
            var options = ''; 
            $.each(j, function(key, value) { 
                options += '<option value="' + key + '">' + value + '</option>';
            });     
            $("select#group_id").html(options);             
        }
    })                      
).then(populateForm('form1',customer_id));  

实际应用代码：

<!-- Main function -->  
populateFormBoxSS = function(id){
    $.ajax({
        url: "get-json-fich_ss.php?id="+id,
        async: false,
        dataType: 'json',
        success: function (j) {         
            // Populate drop-downs              
            $.when(populateEstadosTest('box-estado_id')).then(populateFormGeneric(j, "box"));   
        }
    });         
}   
<!-- Generic Form Population -->
populateFormGeneric = function (j, target) {
    $.each(j, function(key, value) { 
        switch ($('#'+target+'-'+key).attr('type')) {
            case 'checkbox':
                if(value==1) {
                    $('#'+target+'-'+key).attr('checked', true);
                }
                break;                      
            default:
                $('#'+target+'-'+key).val(value);
                break;                  
        }                                           
    });     
    return function(){
        // Do nothing
    }
}
<!-- Dropdown list population -->   
populateEstadosTest = function(field){
    var dfd = new $.Deferred();     
    $.ajax({
        url: "get-json-esta.php",
        async: true,
        dataType: 'json',
        success: function (j) {
                var options = ''; 
                $.each(j, function(key, value) { 
                    options += '<option value="' + key + '">' + value + '</option>';
                });     
                $("select#"+field).html(options);
                // Resolve Deferred
                dfd.resolve();              
        }
    }); 
    return dfd.promise(); // Returns a promise              
}

Answer 1

populateForm('form1') 返回一个函数吗？Deferred .then 需要一个回调函数，例如：

var populateForm = function (j, target) {
    return function() {
        $.each(j, function(key, value) { 
            switch ($('#'+target+'-'+key).attr('type')) {
                case 'checkbox':
                    if(value==1) {
                        $('#'+target+'-'+key).attr('checked', true);
                    }
                    break;                      
                default:
                    $('#'+target+'-'+key).val(value);
                    break;                  
            }                                           
        });
    }     
}

$.when(
    $.ajax({
        url: "get-status.php",
        async: true,
        dataType: 'json',
        success: function (j) {
            var options = ''; 
            $.each(j, function(key, value) { 
                options += '<option value="' + key + '">' + value + '</option>';
            });     
            $("select#status_id").html(options);                
        }
    }),
    $.ajax({
        url: "get-groups.php",
        async: true,
        dataType: 'json',
        success: function (j) {
            var options = ''; 
            $.each(j, function(key, value) { 
                options += '<option value="' + key + '">' + value + '</option>';
            });     
            $("select#group_id").html(options);             
        }
    })                      
).then(populateForm('form1',customer_id));