1

タイトルに基づいて、画像が表示されなくなるまで画像の存在をチェックすることになっているこの関数があります。

function LoadPictures(){
        const PIC_MAX = 12;

        var i = 1;

        while (i <= PIC_MAX){
            $.ajax({url: "pic" + i + ".jpg",
                type: "HEAD",
                success: function(){
                    $("body").append("<img src='pic" + i + ".jpg' />");
                },
                error: function(){
                    i = PIC_MAX + 1;
                }
            });

            i++;
        }
    }

それでも、関数を実行すると、空白のボックスしか表示されません。表示されるボックスの数に基づいて、ループが既存の画像を正しくカウントしていることはわかっていますが、それらを読み込めませんでした。何故ですか？

4

1 に答える 1

5

これは、コールバックが非同期であるためiです。コールバックが実行されるたびに、 の値がループの最後の値になる可能性があります。次の例を考えてみましょう ( DEMO ):

var length = 10;
var url = window.location;
for (i=0 ; i<length ; i++) {
    $.get(url, function(result) {
        console.log(i);
    });
}

ここで、ログに記録される値はi1 ～ 10 ではありません。これiは、サーバーが応答を送信している間、更新され続けるローカル変数であるためです。

これを回避するには、「カリー化」と呼ばれる手法を使用できます。コールバック関数を別の関数でラップし、現在の値をiすぐに渡します ( DEMO ):

success: (function(i){
    return function() {
        $("body").append("<img src='pic" + i + ".jpg' />");
    }
})(i),
于 2012-10-19T02:28:57.823 に答える