停止一次运行的多个函数实例

Question

我对JavaScript很新，并且到处搜索我的问题的答案，似乎无法找到任何相关的东西。这告诉我，由于我对程序运作方式的理解，我错过了一些东西。

我写了一个小游戏，玩家使用游戏循环浏览随机生成的迷宫，游戏循环每隔x毫秒检查一次keydown事件。游戏有一个难度下拉菜单，然后游戏启动我点击一个按钮调用一个功能来创建一个绘制游戏的画布。

我的问题是，当再次点击按钮创建新的迷宫而不重新加载页面时，原始迷宫的游戏循环仍在运行，因此关键事件被注册两次。这会导致一些意外行为。就好像每次单击按钮一样，该函数的新实例正在运行。有没有办法每次点击按钮我可以设置它来停止上一个游戏功能？

var canvas;
var div;
var mazeGenButton;

$(document).ready(function () {
    canvas = null;
    div = document.getElementById('canvascontainer');;

    mazeGenButton = document.getElementById("mazeGenButton");
    mazeGenButton.onclick = createInstance;
});

function createInstance() {
    if (canvas != null) {
        div.removeChild(document.getElementById("myCanvas"));
    }
    canvas = document.createElement('canvas');
    canvas.id = "myCanvas";
    canvas.width = 1000;
    canvas.height = 1000;
    div.appendChild(canvas);
    drawMaze();
};

var drawMaze = function () {

//code here to create the game(not posted)

//here is the Key listener - not sure if it's related
var keyState = {};
    window.addEventListener('keydown', function (e) {
        keyState[e.keyCode || e.which] = true;
    }, true);
    window.addEventListener('keyup', function (e) {
        keyState[e.keyCode || e.which] = false;
    }, true);

    function gameLoop() {
        //left
        if (keyState[37] || keyState[65]) {
            if (isLegalMove(playerXPos - 1, playerYPos)) {
                grid[playerXPos][playerYPos].removePlayerCell();
                playerXPos -= 1;
                grid[playerXPos][playerYPos].setPlayerCell();
            }
        }
        //right
        if (keyState[39] || keyState[68]) {
            if (isLegalMove(playerXPos + 1, playerYPos)) {
                grid[playerXPos][playerYPos].removePlayerCell();
                playerXPos += 1;
                grid[playerXPos][playerYPos].setPlayerCell();
            }
        }
        //up
        if (keyState[38] || keyState[87]) {
            if (isLegalMove(playerXPos, playerYPos - 1)) {
                grid[playerXPos][playerYPos].removePlayerCell();
                playerYPos -= 1;
                grid[playerXPos][playerYPos].setPlayerCell();
            }
        }
        //down
        if (keyState[40] || keyState[83]) {
            if (isLegalMove(playerXPos, playerYPos + 1)) {
                grid[playerXPos][playerYPos].removePlayerCell();
                playerYPos += 1;
                grid[playerXPos][playerYPos].setPlayerCell();
            }
        }

        drawSurroundingCells();

        setTimeout(gameLoop, 50);
    }
}