javascript - 如何在 .each 循环内的 Jquery 回调完成后执行函数

Question

我有一个调用 JQuery.each() 的函数。然后，它调用执行回调的第三方函数 (Devexpress GetRowValues())。.each 完成后，我必须调用 DoSuccess() 并传入数组 rv。问题是 RVGridCB() 在 DoSuccess() 之后执行。如何确保 .each 循环中的所有回调在执行 DoSuccess() 之前完成？

function ReturnValueAndClose(ctrl) {
    var rv = new Array();

    $('[id*="chkCopy"]').each(function () {
        try {
            var v = $(this).val();
            if (v == 'C') {               
                var id = eval($(this)[0].id).id;
                var i = id.indexOf('chkCopy_') + 8;               
                var rowIndex = parseInt(id.substr(i, 4));
                 wgdFormFile.GetRowValues(rowIndex, "Name;Description;Details", RVGridCB);           
            }

        } catch (e) {
        }

    });   

     function RVGridCB(values) {           
            rv.push(values);  
        }

     DoSuccess(new Array('1', rv));
     return false;    
}

Answer 1

我认为你可以与 deferred 合作对象。

为每个回调 RVGridCB 和回调调用 dfd.resolve() 内部创建一个包含延迟对象的数组。

在done回调中$.when.apply($, deferred_arr).done(function () ...);你可以调用doSuccess(...).

这是一个带有超时的延迟示例，用于模拟异步事件。您也可以在这里找到它 jsFiddle .

<小时/>

编辑 2015 年 2 月 4 日:

我为每个延迟对象添加了一个完成回调，以更好地显示每个超时的结束。

var asyncEvent = function (n) {
    var dfd = $.Deferred();
    var duration = n * 1000;

    setTimeout(function () {
        dfd.resolve(n);
    }, duration);
    
    dfd.done(function(n) {
        var now = new Date();
        //console.log('end time', n, now);
        $('body').append('end time of task ' + n + ': '+ now.toString() + '<br/>');
    });
    
    return dfd;
};

var thingsToDo = [1, 2, 3, 4];
var def = [];

var events = function () {
    $.each(thingsToDo, function (index, value) {
        var now = new Date();
        $('body').append('start time: ' + now.toString() + '<br/>');
        //console.log('called', value);
        def.push(asyncEvent(value));
    });
    return def;
};

$.when.apply($, events())
    .done(function (status) {
    //console.log(def);
    var now = new Date();
    console.log('end time', now);
    $('body').append('end time: ' + now.toString() + '<br/>');
    $('body').append('all events done');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>