javascript - 循环结束后调用循环内的函数

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%');
    }
}

我有一个函数，可以在其中初始化多个 kendo ui 网格。网格有databound、transport.read等函数可以随时调用。

这意味着像 dataBound 这样的函数会在 for 循环完成后被调用。这也意味着增量变量var i；将位于grids.length + 1，因此当调用包含这段代码noRecords(grids[i].gridName)的dataBound函数时，grids[i]将位于错误的位置索引!

一种解决方法是手动逐一定义网格，但我有三个网格，它们具有完全相同的列等。但是代码会看起来很糟糕，因为我在重复事情。

我该如何解决这个问题？

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]);
}