等待。每（）來完成，考慮到。每（）的Ajax調用

Question

可能重複：
Continue Execution Only After .each() Completes

這個問題實際上是從this discussion的延續。考慮到其回調函數中有$.get()，我們如何等待each()完成其執行？

可以找到工作實例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); 
    }); 
}