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

Question

我得到了这段代码，我似乎无法开展工作。这似乎是一个范围问题，我想知道你是否有任何想法。

以下是我认为已破解的代码部分。

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

问题是当我点击它执行函数的图像时，但是selectR / 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

因此，传递给click函数的图层对象似乎是对自身的引用。所以只需将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();
}