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";      
    });
});

那么如何传递正确画布的值？
谢谢你的帮助！

Answer 1

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

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

Answer 2

将此部分更正为此部分。

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

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

            /* more code */
        })(i);

我创建了一个闭包，以便在循环迭代中捕获i值。

我将提供一个简单的例子：

var i=0;

i++;
alert(i) //1

i++;
alert(i) //2


alert(i) //2 !!!

这是你代码中实际发生的事情。

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

2 个答案: