等待.each()完成,给定.each()具有AJAX调用

Question

可能重复:
仅在.each()完成后继续执行

这个问题实际上是这次讨论的延续.each()考虑到$.get()其回调函数内部,我们如何等待完成执行？

可以在这里找到工作示例.

/* 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在这个问题中为您提供了大部分解决方案:仅在.each()完成后继续执行

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);
    });
}