ループ内の関数はループが終了した後に呼び出されます

Question

function initGrids() {
    for (var i = 0; i < grids.length; i++) {

        $('#' + grids[i].gridName).kendoGrid({
            columns: [{
                width: 50, "template": "<input type=\"checkbox\" />"
            },
            {
                field: "Name",
                title: "Name"
            }],
            dataBound: function () {
                noRecords(grids[i].gridName);
            }
        }).css('width', '100%');
    }
}

.

この関数は、複数の剣格UIグリッドを初期化します。グリッドには、データバウンドやtransport.readなどの機能があります。

これは、forループが完了した後にデータバウンドのような関数が呼び出されることを意味します。これはまた、増分変数var iを意味する。GridS.Length + 1になります。そのため、このコードnoRecords(grids[i].gridName)を含むデータバインド関数が呼び出されると、グリッド[i]は間違ったインデックスになります！

解決する1つの方法は、グリッドを1つずつ手動で定義していますが、まったく同じ列などを持つ3つのグリッドがありますが、コードは物事を繰り返します。

これを解決するにはどうすればいいですか？

Answer 1

別の機能を使用するか、クロージャーを使用する

クロージャー

for (var i = 0; i < grids.length; i++) {
    (function(index){
       $('#' + grids[index].gridName).kendoGrid({
           columns: [{
               width: 50, "template": "<input type=\"checkbox\" />"
           },
           {
               field: "Name",
               title: "Name"
           }],
           dataBound: function () {
               noRecords(grids[index].gridName);
           }
       }).css('width', '100%');
    })(i);
}

.

または関数

function initGrid(grid){
    $('#' + grid.gridName).kendoGrid({
        columns: [{
            width: 50, "template": "<input type=\"checkbox\" />"
        },
        {
            field: "Name",
            title: "Name"
        }],
        dataBound: function () {
            noRecords(grid.gridName);
        }
    }).css('width', '100%');
}

for (var i = 0; i < grids.length; i++) {
   initGrid(grids[i]);
}

.

Answer 2

closure に使用する必要があります。ループ固有の値を使ってiをキャプチャします。

// ...
dataBound: (function (index) {
    return function(){
        noRecords(grids[index].gridName);
    }
})(i)
// ...

.