0

結果を見てくださいonComplete: 現在item.nameは常にrtyですが、 (1/2): qwe、 (2/2): である必要がありますrty。この問題はクロージャーを使用して解決できることは理解していますが、方法がわかりません。

少し更新 http://jsfiddle.net/tJYem/

Items = function(){
    this.onProgress = function(current, total, item){};
    this.onComplete = function(){};
}

Items.prototype.add = function(items){

    var self = this;
    var i = 0, total = items.length;

    while(items.length){
        var item = items.shift();
        var img = new Image();

        // closure should be somewhere here...
        img.onload = function(){

            self.onProgress(++i, total, item);

            i == total && self.onComplete();

        }

        img.src = item.src;

    }

}


var items = new Items();

items.onProgress = function(current, total, item){
    console.log('(%d/%d) item `%s` loaded', current, total, item.name);
    // => (1/2) item `rty` loaded
    // => (2/2) item `rty` loaded
}

items.onComplete = function(){
    console.log('Loading items complete.')
}

items.add([
    {name: 'qwe', src: '../qwe.png'},
    {name: 'rty', src: '../rty.png'}
]);
4

2 に答える 2

0 
img.onload = (function(currentI) {
    // here currentI will stay with the value the i had in the moment of creating this handler
})(i)

リストの最後の画像が読み込まれたときにロジックonCompleteハンドラーが起動されることに注意してください。ただし、すべての画像が読み込まれたときではありません。

于 2012-08-29T12:28:11.080 に答える
0

iすべてのハンドラーによってインクリメントされる必要onloadがあるため、その変数のクロージャーを作成しないでください。iそうしないと、値を共有する代わりに、すべてのハンドラーが独自にインクリメントしてしまいます。また、self画像とは独立しています。ただし、item各ハンドラーで異なる必要があります: http://jsfiddle.net/tJYem/1/。

img.onload = (function(item){
    return function(){
        self.onProgress(++i, total, item);
        i == total && self.onComplete();
    }
})(item);
于 2012-08-29T12:42:55.227 に答える