Question

Please, help me create right event for my situation. I believe there is
true way to do it, without any counters (like this: How to know when all ajax calls are complete)

HTML:

<ul id="links">
    <li><a href="1.html">What is Yoda's first name?</a></li>
    <li><a href="2.html">Why does Padme die?</a></li>
    <li><a href="3.html">Who is Darth Rage?</a></li>
</ul>
<div id="content"></div>

jQuery:

$('#links a').each(function (index, el) {
    url = $(el).attr('href');
    $('<div class="article" />').appendTo('#content')
        .load(url, function(){
            filterOneArticle(this);
        });
});

// I want this function run after all articles will be loaded and filtered 
$.bind('yepAllArticlesHaveBeenLoaded', filterAllArticles);

filterAllArticles = function() {};
filterOneArticle = function(el) {};

Answer 1

If for whatever reason you don’t want to use ajaxStop as Nick suggests (perhaps you’re worried about other, unrelated ajax requests throwing you off), you can keep track of how many requests you’ve issued and check when each one succeeds/fails:

var requestCount = 0;
$('#links a').each(function (index, el) {
    url = $(el).attr('href');
    ++requestCount;
    $('<div class="article" />').appendTo('#content')
        .load(url, function(){
            filterOneArticle(this);
            --requestCount;
            if (requestCount == 0) {
                filterAllArticles();
            }
        });
});

That looks like it has a race condition (What if the first article finishes loading before we’ve requested the second?), but it doesn’t. JavaScript on browsers is single-threaded (barring the use of web workers, which you have to do explicitly), and so we know we’ll finish our loop initiating the requests before the first completion can come through.