包装并传递循环索引后，从img.onload内部访问img

在JavaScript中，当你需要在img.onload事件处理函数内部访问外部作用域的变量时，可能会遇到闭包问题。这是因为img.onload回调函数在执行时，其作用域链可能不会包含外部作用域的变量，尤其是当这些变量是在循环中定义的时候。

基础概念

闭包是指一个函数能够记住并访问它的词法作用域，即使这个函数在其词法作用域之外执行。在JavaScript中，每当创建一个新的函数时，闭包就会在函数创建的同时被创建。

问题描述

当你在循环中创建img元素并为每个元素设置onload事件处理函数时，可能会遇到所有回调函数共享同一个循环索引的问题。这是因为回调函数在执行时，循环已经结束，此时循环索引的值已经是最后一次迭代的值。

解决方案

为了避免这个问题，你可以使用立即执行函数表达式（IIFE）来捕获每次迭代中正确的索引值。

示例代码

for (var i = 0; i < images.length; i++) {
    (function(index) {
        var img = new Image();
        img.src = images[index];
        img.onload = function() {
            // 在这里，index变量是正确的，因为它被IIFE捕获
            console.log('Image loaded:', index);
            // 现在你可以安全地访问img元素和index变量
        };
    })(i); // IIFE立即执行，并传入当前的i值
}

在这个例子中，每次循环迭代都会创建一个新的作用域，其中包含当前迭代的索引值。这样，当img.onload事件触发时，它将访问到正确的索引值。

优势

• 正确性：确保每个onload回调都能访问到正确的循环索引。
• 可维护性：代码更清晰，易于理解和维护。

应用场景

• 当你需要为多个异步操作（如图片加载）设置回调，并且需要在回调中访问循环变量时。

注意事项

• 如果你使用的是ES6或更高版本的JavaScript，可以使用let关键字来声明循环变量，这样每个迭代都会有自己的作用域，从而避免闭包问题。

for (let i = 0; i < images.length; i++) {
    let img = new Image();
    img.src = images[i];
    img.onload = function() {
        console.log('Image loaded:', i);
    };
}

在这个例子中，let关键字使得每次迭代都会创建一个新的i绑定，因此每个onload回调都会捕获到正确的索引值。