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

Question

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!

Answer 1

The problem you're experiencing is due to the nature of how JavaScript supports closures. That is not to say that the problem is a bug; it's behaving exactly as it's should. The onload method is being executed after i has already been iterated all the way through and becomes undefined . A viable solution is to use closures to your advantage and wrap the function creation in a call, such as this.onload = (function(index) { /* ... */ })(i);

This guarantees that the value is stored as expected in an variable internally accessible to the onload methods you're creating.

Answer 2

correct this part of yours to this part.

   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 created a closure so that the i value will be catched as it was on the loop iteration.

I will supply a simple example :

var i=0;

i++;
alert(i) //1

i++;
alert(i) //2


alert(i) //2 !!!

this is what actually happens in you code.