Хранить состояние разных переменных в нескольких анонимных асинхронных функциях в цикле

Question

Я в растерянности, как описать это без кода, так что вот оно:

$('.colors').each(function() {
    $.getJSON('my.json', function(data) {
        $(this).css('color', data.color);
    });
});

Я хочу, чтобы тело обратного вызова getJSON ссылалось на значение this в родительской (each обратный вызов) области.

Этот код не будет работать, потому что this не будет тем, что было за пределами обратного вызова getJSON. Даже если я попытаюсь поместить его в переменную, он не будет работать, потому что все обратные вызовы будут использовать только одну переменную вместо одной на каждую итерацию цикла.

Как мне этого добиться?

Answer 1

Вы могли бы захватить это в закрытии:

$('.colors').each(function() {
    var $this = $(this);
    $.getJSON('my.json', function(data) {
        $this.css('color', data.color);
    });
});

или

$('.colors').each(function() {
    $.getJSON(
        'my.json', 
        (function(element) {
            return function(data) {
                element.css('color', data.color);
            };
        })(this)
    );
});

Answer 2

Посмотрите на прокси

$('.colors').each(function() {
    $.getJSON('my.json', $.proxy(function(data) {
        $(this).css('color', data.color);
    }, this));
});