Событие Jquery Trigger, когда JSON .each сделан

Question

У меня есть следующий код для проверки связи с компьютерами с помощью Jquery и 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");
}

Пинг работает нормально.Перед началом пинга я хочу сделать видимым #progress (изображение) После того, как все компьютеры пингуются, я хочу снова его скрыть.

Проблема в том, что изображение #progress сразу скрывается при вызове функции.Как я могу определить, когда все страницы "pingcomputer.aspx" закончили загрузку?

Answer 1

Подсчитайте количество вещей, которые должны произойти, уменьшайте счет каждый раз, когда одна вещь делает. Когда ничего не осталось, остановите индикатор выполнения. Кстати, по какой причине вы не используете 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();
            }
        })
    })
}

Answer 2

Добавить счетчик, который проверяет, было ли выполнено столько запросов, сколько было запущено:

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

}