for循环内使用jQuery GET方法因异步时序导致赋值错位的咨询

• 循环变量绑定问题：原代码遍历数组时没有对遍历变量做块级声明，i是挂载在全局上下文的隐式全局变量，所有$.get的异步回调闭包引用的都是同一个i的内存地址。等同步的循环逻辑全部执行完，i已经被赋值为数组的最后一个元素，不管哪个请求先返回响应，修改属性的操作都会落到最后一个元素上，完全对应不上请求和数据的匹配关系。
• ready事件绑定逻辑错误：原代码在循环内写的jQuery(document).ready($.get(...))是无效写法——ready方法要求传入一个可执行的函数作为页面就绪后的回调，但这里直接把$.get的返回值（jqXHR请求对象）传进去了，既没有把请求逻辑包在函数里触发，也会因为每次循环重复绑定ready事件造成冗余代码。

方案1：使用块级作用域绑定每轮遍历的对象（最简洁） #

将DOM就绪事件的绑定移到循环外层，循环内用const声明遍历变量，每轮迭代都会创建独立的变量绑定，彻底解决闭包共享的问题。

// 仅绑定一次DOM就绪事件，执行整体循环逻辑
jQuery(document).ready(function() {
    // 用const声明每轮遍历的instructor，独立绑定不被后续循环覆盖
    for (const instructor of instructors) {
        $.get(instructor["image-link-post"], function(data) {
            // 此处的instructor对应当前轮次的条目，引用独立
            instructor['image-link'] = data.guid.rendered;
            // 直接将提取到的链接赋值为对应图片的src
            // 示例：jQuery(`img[data-instructor-id="${instructor.id}"]`).attr('src', instructor['image-link'])
        });
    }
});

方案2：兼容老旧环境的IIFE隔离作用域写法 #

如果需要兼容不支持块级作用域（let/const）、不支持for...of的老旧浏览器，可以用立即执行函数为每个请求创建独立的函数作用域，将当前遍历条目作为参数传入，阻断闭包共享：

jQuery(document).ready(function() {
    for (var index = 0; index < instructors.length; index++) {
        // 立即执行函数，将当前遍历条目作为参数传入，创建独立作用域
        (function(currentInstructor) {
            $.get(currentInstructor["image-link-post"], function(data) {
                currentInstructor['image-link'] = data.guid.rendered;
            });
        })(instructors[index]);
    }
});

进阶：批量等待所有请求完成后统一更新DOM #

如果不需要在单个请求返回时立刻更新对应图片，可以收集所有请求的Promise实例，统一等所有请求返回后再做批量DOM操作，避免频繁操作页面造成的性能波动：

jQuery(document).ready(function() {
    // 收集所有请求的Promise实例
    const allRequests = instructors.map(instructor => {
        return $.get(instructor["image-link-post"]).then(res => {
            instructor['image-link'] = res.guid.rendered;
        });
    });
    // 所有请求完成后统一遍历数组赋值图片src
    $.when(...allRequests).always(() => {
        instructors.forEach(item => {
            // 对应图片的src赋值逻辑
        })
    });
});

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