4

Webページ上の領域のIDと、Webサービスに渡す必要のあるパラメーターで構成される多次元配列をループする関数があります。呼び出しからの戻り値$.ajax()は、配列の最初の部分に入力（再描画）したいHTMLになります。

function getViews(){

    // loop through, need view/jsp name and where we want to put the HTML... need a multidimarray...
    var viewArr = [["infoCol","info"], 
                   ["noteCol", "notes"],
                   ["buttonsDiv", "buttons"],
                   ["historyPanel","history"], 
                   ["servicesPanel","services"],
                   ["noFOUC","dialogs"]
                  ];

    // do the loop
    for(var i = 0;i<viewArr.length;i++){

        var thisArea = viewArr[i][0];

        $.ajax({
            url:"getView",
            type:"POST",
            data:{view:viewArr[i][1]},
            dataType:"html",
            success:function(data){
              console.log(thisArea); // this is always noFOUC
              // console.log(viewArr[i][0]); // this gives an undefined error...
                $("#" + thisArea).html(data);
            },
            error:function(xhr, ajaxOptions, thrownError){
                console.log(xhr.status);
                console.log(xhr.statusText);
                console.log(thrownError);
            }
        }); 

    }
}

これですべてがうまくいきましたがviewArr[i][0]、成功の中でループの最初の部分を参照しようとしています：コールバックが機能していません！私がそれを成功の範囲内に置くと、それは未定義です。上記の例のように外部の変数を指定すると、$.ajax()それは常に配列の最後の項目になります。ここにクロージャーを追加する必要があると思いますが、どこで、なぜかわかりません。誰か説明してもらえますか？

私がこれをうまく表現したり説明したりしていない場合は、私に知らせてください。私はよりよく説明します。

4

1 に答える 1

3

d私はこれを持っていると思います...ループ内に自己実行関数を配置しました...非同期を忘れました！ループは続きます...doh！

function getViews(){

    // loop through, need view/jsp name and where we want to put the HTML... need a multidimarray...
    var viewArr = [["infoCol","info"], 
                   ["noteCol", "notes"],
                   ["buttonsDiv", "buttons"],
                   ["historyPanel","history"], 
                   ["servicesPanel","services"],
                   ["noFOUC","dialogs"]
                  ];

    // do the loop
    for(var i = 0;i<viewArr.length;i++){

        (function(){

        var thisArea = viewArr[i][0];
        $.ajax({
            url:"getView",
            type:"POST",
            data:{view:viewArr[i][1]},
            dataType:"html",
            success:function(data){
                $("#" + thisArea).html(data);
            },
            error:function(xhr, ajaxOptions, thrownError){
                console.log(xhr.status);
                console.log(xhr.statusText);
                console.log(thrownError);
            }
        }); 

        })(viewArr[i][0]);

    }
}
于 2013-01-24T13:06:40.363 に答える