2

somehow my counter variable is not passed to the child function. i'm guessing it's because of some asyncronous behavior but actually i have no clue. please help.

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

so how can i pass the value for the right canvas?
thanks for any help!

4

2 回答 2

1

您遇到的问题是由于 JavaScript 支持闭包的性质所致。这并不是说问题是错误。它的行为与应有的完全一样。该方法在已经被一路迭代并成为onload后被执行。一个可行的解决方案是使用闭包来发挥您的优势并将函数创建包装在调用中，例如iundefinedthis.onload = (function(index) { /* ... */ })(i);

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

于 2013-01-03T16:10:13.597 回答
0

将你的这一部分改正到这部分。

   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 !!!

这就是您的代码中实际发生的情况。

于 2013-01-03T16:06:23.950 回答