JS видимость переменной в функции

Question

Я работаю с JSON и хочу подсчитать количество элементов в ответе.

    $.getJSON("/api/getEvents", function(data) {
        $.each(data, function(key, event) {
            var count = 10;
            $.getJSON("/api/getUsers", function(data) {
                $.each(data, function(key, event) {
                    alert("Value: " + count);
                    count++;
                });
            });
            alert("Count: " + count);
        });
    });

В результате я получаю:

Value: 10
Value: 11
Value: 12
...
Count: 10

Почему count = 10?

Answer 1

Это потому что запросы ajax асинхронны. $.getJSON просто инициирует запрос, но выполнение javascript немедленно продолжается. Вы можете увидеть количество, если переместите предупреждение в обратный вызов ajax:

$.getJSON("/api/getEvents", function(data) {
    $.each(data, function(key, event) {
        var count = 10;
        $.getJSON("/api/getUsers", function(data) {
            $.each(data, function(key, event) {
                alert("Value: " + count);
                count++;
            });

            // I moved this here:
            alert("Count: " + count);
        });
        // It used to be here.
    });
});

Таким образом, после установки var count = 10 парсер javascript затем запускает $.getJSON, но затем немедленно переходит к следующей строке, которая в вашем примере кода выдавала предупреждение "Count: 10". Затем, когда запрос завершается, он запускает код обратного вызова, который увеличивает счетчик и оповещает о Value строках.