javascript - 通过未来函​​数循环和设置全局变量

Question

我得到了这部分代码，我似乎无法正常工作。我想知道您是否有任何想法，这似乎是一个范围界定问题。

这是我认为已损坏的代码部分。

                click: function(layer) {
                    selectedR = r;
                    selectedC = c;
                    render();
                },

问题是当我单击图像时它会执行该函数，但是 selectedR/selectedC 的值总是设置为 8,8，这意味着它不会从 r,c 中获取变量值，直到实际单击该函数。你能想出我能做到这一点的方法吗？我基本上想知道我点击的项目的r，c。如果有帮助，我正在使用 JQuery/JCanvas 库。下面是上下文中的代码。

var selectedR;
var selectedC;


function drawPieces(){
    for( var r = 0; r < 8; r++){
        for(var c = 0; c < 8; c++){
            var x = boardLeft + (c * tileWidth);
            var y = boardTop + (r * tileHeight);
            var piece = gameboard[r][c];

            if(piece.pieceCode == ChessPieceEnum.EMPTY){
                continue;
            }

            $("canvas").drawImage({
                layer: true,
                source: piece.pieceCode.normalImage,
                x: x, 
                y: y,
                cursor: "pointer",
                click: function(layer) {
                    selectedR = r;
                    selectedC = c;
                    render();
                },
                fromCenter: false
            });

            piece.x = x;
            piece.y = y;
        }
    }
}

Answer 1

所以看起来传递给点击函数的图层对象是对自身的引用。因此，只需将 r/c 添加到图层对象，就可以在匿名函数中访问它。

function drawPieces(){
    for( var r = 0; r < 8; r++){
        for(var c = 0; c < 8; c++){
            var x = boardLeft + (c * tileWidth);
            var y = boardTop + (r * tileHeight);
            var piece = gameboard[r][c];

            if(piece.pieceCode == ChessPieceEnum.EMPTY){
                continue;
            }

            $("canvas").drawImage({
                layer: true,
                source: piece.pieceCode.normalImage,
                x: x, 
                y: y,
                r: r,
                c: c,
                cursor: "pointer",
                click: function(layer){
                    onPieceClick(layer.r, layer.c);
                },
                fromCenter: false
            });

            piece.x = x;
            piece.y = y;
        }
    }
}

function onPieceClick(r,c){
    selectedR = r;
    selectedC = c;
    render();
}