Question

使用谷歌可视化库，但我认为这不重要。

我有一个名为data.H的变量，其长度为5

我想在这里循环：

var cols = new Array();
        for (var x = 1; x < data.H.length + 1; x++) {
          var idx = x - 1;
          console.log(idx);
          cols.push({
              type: 'number',
              label: data.getColumnLabel(idx),
              calc: function (dt, row) {
                  console.log("row: ", row, "Idx: ",idx);
                  var val = dt.getValue(0, idx); // this is always 5
                  for (var i = 1, total = 0, cols = dt.getNumberOfColumns(); i < cols; i++) {
                      total += dt.getValue(row, i);
                  }
                  var percent = val / total;
                  return {v: percent, f: (percent * 100).toFixed(2) + '%'}; // return value and value
              }
          });
        };
        view.setColumns(cols);

问题是我的calc方法需要引用idx。但是idx总是5.每个循环应该是1,2,3,4和5。

这里发生了什么？如何使calc函数引用循环时的数字？

Answer 1

当您调用calc方法时，循环将已经完成，并且所有calc函数将在其最后状态保持对（相同）x和idx的引用。你需要引入另一个函数/范围，以便能够＆＃34;冻结＆＃34;每个特定idx。（语法上）最简单的方法是创建一个单独的函数，它将idx作为参数，并返回另一个函数。

function createCalcFunction(idx) {
    return function (dt, row) {
        /* make a local copy */
        var localIdx = parseInt(idx, 10);
        console.log("row: ", row, "Idx: ",localIdx);

        var val = dt.getValue(0, localIdx);

        for (var i = 1, total = 0, cols = dt.getNumberOfColumns(); i < cols; i++) {
          total += dt.getValue(row, i);
        }
        var percent = val / total;
        return {v: percent, f: (percent * 100).toFixed(2) + '%'}; // return value and value
    }
}

var cols = [];
for (var x = 1; x < data.H.length + 1; x++) {
    var idx = x - 1;
    console.log(idx);
    cols.push({
        type: 'number',
        label: data.getColumnLabel(idx),
        calc: createCalcFunction(idx);
    });
};
view.setColumns(cols);

JavaScript循环引用循环中的最后一个数字

1 个答案: