JavaScript：循环执行异步代码时如何维护元素实例

你遇到的问题核心是异步回调执行时丢失了当前迭代元素的正确引用，虽然forEach的回调本身会创建独立作用域，但如果工具库的异步处理逻辑影响了回调的作用域，就会导致所有回调最终指向最后一个元素。以下是几种可靠的解决方式：

方式一：用箭头函数锁定词法作用域 #

箭头函数会继承外部作用域的变量引用，不会被后续迭代覆盖，直接替换success回调为箭头函数即可：

Array.from(document.querySelectorAll("[data-custom-price='true']")).forEach(function (ele, idx) {
    t$.get(
        // 注意：补上原代码的URL拼接逻辑，否则所有请求会用同一个URL
        "/subscriptions/getfees?product=" + ele.dataset.item,
        {
            success: (result) => {
                ele.innerHTML = result;
            }
        }
    )
})

方式二：显式创建闭包捕获元素 #

通过立即执行函数（IIFE）将当前元素封装到独立作用域中，确保异步回调能拿到正确的元素引用：

Array.from(document.querySelectorAll("[data-custom-price='true']")).forEach(function (ele, idx) {
    // 用IIFE创建闭包，捕获当前迭代的元素
    (function(currentEle) {
        t$.get(
            "/subscriptions/getfees?product=" + currentEle.dataset.item,
            {
                success: function(result) {
                    currentEle.innerHTML = result;
                }
            }
        );
    })(ele);
})

方式三：扩展工具库支持上下文传递 #

修改你的t$.get方法，允许传递上下文（比如当前元素），在回调执行时绑定到函数中：

// 修改t$.get实现
t$.get = function (url, params) {
    // 保留原有的参数检查和默认值处理逻辑
    fetch(url, params).then(function (response) {
        return response.text();
    }).then(function (result) {
        // 调用success时，将context作为this传入
        params.success.call(params.context || window, result);
    });
}

// 使用时传递context
Array.from(document.querySelectorAll("[data-custom-price='true']")).forEach(function (ele, idx) {
    t$.get(
        "/subscriptions/getfees?product=" + ele.dataset.item,
        {
            context: ele,
            success: function(result) {
                // 这里的this就是传入的ele
                this.innerHTML = result;
            }
        }
    )
})

额外注意 #

你改写后的代码中遗漏了原逻辑的URL拼接步骤，如果直接使用未拼接的url变量，会导致所有请求访问同一个接口地址，这也是可能引发问题的原因之一，必须补上ele.dataset.item的拼接。

内容的提问来源于stack exchange，提问作者Jamie Hartnoll