如何在JavaScript for-each周期中将参数传递给promise函数

Question

我有文档元素列表。 我想用html更改元素的externalHtml。 HTML是从文件中循环加载的，因此我使用了Promise。 问题在于在循环中将元素传递给promise函数，因为仅传递了数组中的最后一个元素。

 ...
 /**
 * Set outer html of element.
 * @param element
 * @param newHtml
 */
setOuterHtml = function(element, newHtml){    
    console.log("ELEMENT ", element); // always <ge-test-2></ge-test-2>
    element.outerHTML = newHtml;
}

this.loadElementsToHtml = function(){
    console.log(this.elements); 
    //[ge-survey, ge-test-1, ge-test-2]
    var promises  = [];
    for(var i=0; i<this.elements.length; i++){
        var el = this.elements[i];
        // laod html from file
        var elPromise = this.loadHtml(el);
        // set outer html when HTML is loaded
        //// problem here with el !!! always ge-test-2 element
        elPromise.then(res => setOuterHtml(el,res)); 
        promises.push(elPromise);
    }

    return Promise.all(promises);
}

Answer 1

看起来这里的问题是，当您遍历元素时， el变量正在更改，并且当完成循环时， el将引用数组中的最后一个元素。

正确执行此操作的一种简单（更简洁）的方法是使用.map()以便每次迭代都具有自己的作用域：

this.loadElementsToHtml = function(){
    console.log(this.elements); 
    //[ge-survey, ge-test-1, ge-test-2]

    return Promise.all(this.elements.map(el => 
        this.loadHtml(el).then(res => setOuterHtml(el, res));
    ));
}

Answer 2

您似乎已经在this.elements内部具有该元素，只需将其及其索引传递给它。

this.loadElementsToHtml = function(){
    console.log(this.elements); 
    var promises  = [];
    for(var i=0; i<this.elements.length; i++){
        // laod html from file
        var elPromise = this.loadHtml(this.elements[i]);
        elPromise.then(res => setOuterHtml(this.elements[i], res)); 
        promises.push(elPromise);
    }

    return Promise.all(promises);
}