jquery AJAX成功コールバックの関数に変数を渡す

質問

私はjQueryのAJAX呼び出しでいくつかの画像をプリロードしようとしていますが、AJAX呼び出しの成功関数内の関数に（URL）文字列を渡すことに大きな問題を抱えています（もしそれが意味をなさないならば）。

以下は、そのままの私のコードです。

//preloader for images on gallery pages
window.onload = function() {
    setTimeout(function() {     
        var urls = ["./img/party/"]; //just one to get started

        for ( var i = 0; i < urls.length; i++ ) {
            $.ajax({
                url: urls[i],
                success: function(data,url) {
                    $(data).find("a:contains(.jpg)").each(function(url) {                               
                        new Image().src = url + $(this).attr("href");
                    });
                }
            });
        };  
    }, 1000);
};

の中にurlを渡そうとした私の（失敗した）試みを見ることができます。 .each() を呼び出すことです。 url は、増加する整数の値を取ることになります。なぜ、あるいは何に関連しているのかは不明ですが、おそらく jpg ファイルの数でしょうか？

...とにかく、それはもちろん、私のオリジナルのURL配列の単一の値を取るべきです。

どんな助けにも感謝します。私はいつもこれらのコールバックで少しねじれるようです。

PROGESS？

ということで、@ron tornambeさんや@PiSquaredさんのコメントを参考に、少しまったりして、現在に至ります。

//preloader for images on gallery pages
window.onload = function() {
    var urls = ["./img/party/","./img/wedding/","./img/wedding/tree/"];

    setTimeout(function() {
        for ( var i = 0; i < urls.length; i++ ) {
            $.ajax({
                url: urls[i],
                success: function(data) {
                    image_link(data,i);
                    function image_link(data, i) {
                        $(data).find("a:contains(.jpg)").each(function(){ 
                            console.log(i);
                            new Image().src = urls[i] + $(this).attr("href");
                        });
                    }
                }
            });
        };  
    }, 1000);       
};

を配置してみました。 image_link(data, i) をあちこち（ネストした関数など）に置いてみましたが、同じ結果になりました。 i の値は 3 としか記録されません。 i は同じものを指しており、非同期タスクが実際に image_link(data, i) は for... のループが終わっている（つまり、値が3になっている）。言うまでもなく、これは urls[i] を'undefined'とします。

どのように私はこれを回避することができます任意の（より多くの）ヒント？

どのように解決するのですか？

設定オブジェクトはそのajax呼び出しに結びつけられるので、単純にカスタムプロパティとしてインデクサを追加し、そのインデクサには this を使用してアクセスできます。

//preloader for images on gallery pages
window.onload = function() {
    var urls = ["./img/party/","./img/wedding/","./img/wedding/tree/"];

    setTimeout(function() {
        for ( var i = 0; i < urls.length; i++ ) {
            $.ajax({
                url: urls[i],
                indexValue: i,
                success: function(data) {
                    image_link(data , this.indexValue);

                    function image_link(data, i) {
                        $(data).find("a:contains(.jpg)").each(function(){ 
                            console.log(i);
                            new Image().src = urls[i] + $(this).attr("href");
                        });
                    }
                }
            });
        };  
    }, 1000);       
};

編集します。 JSFiddleがECHOエンドポイントの動作方法を変更したようなので、更新されたJSFiddleの例を追加します。 https://jsfiddle.net/djujx97n/26/ .

これがどのように機能するかを理解するために、ajaxSettingsオブジェクトの"context"フィールドを参照してください。 http://api.jquery.com/jquery.ajax/ を、特にこの注釈を参照してください。

"その this の参照は、設定の$.ajaxに渡されたcontextオプションのオブジェクトです; contextが指定されていない場合、これはAjax設定自体への参照です。 が指定されていない場合、これはAjax設定自体への参照です。