Jquery Trigger event when JSON .each is done

I have the following code to ping a list of computers with Jquery and asp.net.

function ping() {
    $('#progress').css("display", "");
    $('.comp').each(function () {
        var $computer = $(this);            
        $.getJSON('pingcomputer.aspx', { computer: $(this).attr("rel") }, function (data) {
            if (data.Status == '1') {
                $($computer).attr("src", "ok.png");
            }
            else {
                $($computer).attr("src", "nok.png");
            }
        })
    开发者_开发百科})
    $('#progress').css("display", "none");
}

The pinging works fine. Before the ping start I want to make #progress visible (an image) After all computers are pinged I want to hide it again.

The problem is that the #progress image is immediately hidden when the function is called. How can I detect when all "pingcomputer.aspx" pages have finished loading?

Add a counter which checks that as many requests have been completed as there was started:

function ping() {
    $('#progress').css("display", "");
    var count = 0,
        total = $(".comp").length;
    $('.comp').each(function () {
        var $computer = $(this);     

        $.getJSON('pingcomputer.aspx', { computer: $(this).attr("rel") }, function (data) {
            count++;     
            if (data.Status == '1') {
                $($computer).attr("src", "ok.png");
            }
            else {
                $($computer).attr("src", "nok.png");
            }
            if (count==total) $('#progress').css("display", "none");
        })
    })

}

Count the number of things that should happen, decrement the count each time one thing does. When there are none left, stop the progress bar. BTW, any reason you're not using show()/hide()?

function ping() {
    $('#progress').show();
    var $comp = $('.comp'),
        waitCount = $(comp).length;
    $comp.each(function () {
        var $computer = $(this);            
        $.getJSON('pingcomputer.aspx', { computer: $(this).attr("rel") }, function (data) {
            if (data.Status == '1') {
                $($computer).attr("src", "ok.png");
            }
            else {
                $($computer).attr("src", "nok.png");
            }
            if (--waitCount == 0) {
               $('#progress').hide();
            }
        })
    })
}