jquery - 等待 .each() 完成，假设 .each() 有 AJAX 调用

Question

这个问题已经有答案了:

已关闭 11 年前。

Possible Duplicate:
Continue Execution Only After .each() Completes

这个问题实际上是this discussion的延续。还等什么each()鉴于有 $.get() 来完成其执行在它的回调函数中？

可以找到工作示例 here 。

/* JavaScript / jQuery. */
<script>        
function prepareLayer($n) {
    $.get('./a.html', function(data) {
        /* a.html contains: <a href="javascript:void(0);">Click me!</a> */
        $n.html(data);
    });
}

function postPreparation() {
    $('.element a').click(function() {
        alert('Ouch... you just clicked me!');
    });
}

$(function() {
    $('.element').each(function() {
        prepareLayer($(this));
    });

    postPreparation();
});
</script>

<!-- HTML -->
<div class="element"></div>
<div class="element"></div>

Answer 1

@Alnitak 为您提供了这个问题的大部分解决方案:Continue Execution Only After .each() Completes

var def = [];
$('.element').each(function() {
    // have prepareLayer return a _promise_ to return
    def.push(prepareLayer());
}

// use "when" to call "postPreparation" once every
// promise has been resolved
$.when.apply($, def).done(postPreparation);

缺失的部分看起来像

function prepareLayer($n) {
    var dfd=$.Deferred();
    $.get('./a.html', function(data) {
        /* a.html contains: <a href="javascript:void(0);">Click me!</a> */
        $n.html(data);
        dfd.resolve();
    });
    return dfd.promise();
}

或者使用 jQuery>=1.8，由 @jfriend00 提供

function prepareLayer($n) {
    return $.get('./a.html').then(function(data) {
        $n.html(data);
    });
}