XHR w pętli

Witam wszystkich,
Zacząłem ostatnio w wolnym czasie realizować projekt pewnej gry / platformy. W zamyśle, cała treść ma być w pełni dynamicznie generowana i jest ona podzielona na 'komponenty'. Nie ładuje całej podstrony, tylko poszczególne elementy. Np. kliknięcie w jakiś przycisk, powoduje załadowanie nowego headera i jakiegoś bloczka. Klik wywołuje jakąś metodę. Problem w tym, że gdy próbuje w pętli uruchamiać xhr, to ostatecznie wykonuje tylko kod dla ostatniego xhr, bo zmienna licznika została juz dawno nadpisana.
Macie pomysł jak przekazać ten licznik i do callbacka onreadystatechange ? Będę musiał jakoś nadpisywać definicje onreadystatechange ?

 
var core = {
    changeTmp(tmpData, bodyClass){
        var i = 0,
            xhr = [];

        if(bodyClass && bodyClass !== '')
            document.body.className = bodyClass;

        if(tmpData && tmpData.arr && tmpData.arr.length > 0){
            for(let component of tmpData.arr){
                let tmpName = component[0],
                    parent = document.getElementById(component[1]);
                i++;
                xhr[i] = new XMLHttpRequest();

                if(tmpName !== ''){
                    xhr[i].open('GET', `${tmpName}.html`, true);
                    xhr[i].onreadystatechange = (i) => {
                        if(xhr[i].readyState === XMLHttpRequest.DONE && xhr[i].status === 200) {
                            parent.innerHTML = xhr[i].responseText;
                        }
                    }
                    xhr[i].send();
                }
            }
        }
    }
}

Wpakuj kod wewnątrz petli w IIFE, coś w tym stylu (nie sprawdzałem):

var core = {
    changeTmp(tmpData, bodyClass){
        var i = 0,
            xhr = [];

        if(bodyClass && bodyClass !== '')
            document.body.className = bodyClass;

        if(tmpData && tmpData.arr && tmpData.arr.length > 0){
            for(let component of tmpData.arr){
                let tmpName = component[0],
                    parent = document.getElementById(component[1]);
                i++;
                (function(i) {
                    xhr[i] = new XMLHttpRequest();

                    if(tmpName !== ''){
                        xhr[i].open('GET', `${tmpName}.html`, true);
                        xhr[i].onreadystatechange = (i) => {
                            if(xhr[i].readyState === XMLHttpRequest.DONE && xhr[i].status === 200) {
                                parent.innerHTML = xhr[i].responseText;
                            }
                        };
                        xhr[i].send();
                    }
                })();
            }
        }
    }
};

PS
Poczytaj o domknięciach.

Albo przerzuć się na ES6

dzek69 napisał(a):

Albo przerzuć się na ES6

A która konstrukcja z ES6 mogła by mi pomóc ?