javascript - jquery.each - 将计数器传递给子 .onload 函数

Question

不知何故，我的计数器变量没有传递给子函数。我猜这是因为一些异步行为，但实际上我不知道。请帮忙。

$(document).ready(function() {
    var imgArray = new Array();
    $("canvas").each(function(i) {
        imgArray[i] = new Image();
    });
    $.each(imgArray, function(i) {
        alert(i);
        //correct output

        this.onload = function() {
            alert(i);
            //"undefined"

            var width = this.width,
                height = this.height;
            var context = $("canvas")[i].getContext("2d");
            //here's the error

            /* more code */
        };
        this.src = "PATH";      
    });
});

那么如何传递正确 Canvas 的值？
感谢您的帮助!

Answer 1

您遇到的问题是由于 JavaScript 支持闭包的方式的性质。这并不是说问题是错误。它的行为完全符合预期。 onload 方法在 i 已经被迭代到 undefined 之后被执行。一个可行的解决方案是使用闭包，并将函数创建包装在一个调用中，例如 this.onload = (function(index) {/* ... */})(i);

这保证了该值按预期存储在您正在创建的 onload 方法内部可访问的变量中。