Функция внутри цикла вызывается после завершения цикла

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.Сетка имеет функции, такие как пакет по пазоре и транспортировку. Если в любое время можно вызвать.

Это означает, что функции, такие как паспорт, называемые после завершения цикла.Это также означает инкрементную переменную VAR I;Будет в Grids.Length + 1, поэтому, когда вызывается функция по пангузанию, которая содержит этот кусок кода noRecords(grids[i].gridName), сетки [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]);
}

.

Answer 2

Вы должны использовать Закрытие здесьзахватить я с его специфическим значением петли

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

.