Question

当我按下按钮（N和O）可能10次时，脚本变得非常反应迟钝，有人有解决方案吗？我想要做的是在游戏中有2个菜单。这是一个应该具有相同效果的测试。

//html code
<!DOCTYPE html>
<html lang ="en">
    <head>
        <meta charset="UTF-8">
        <title>Snake</title>

    </head>
    <body>
        <style>
        canvas{
            display: block;
            position: absolute;
            border: 1px solid "Black";
            margin: auto;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
        }
        </style>
        <script type = "text/javascript" src = "menu2.js"></script>     
        <script type = "text/javascript" src = "menu1.js"></script>
        <script type = "text/javascript" src = "main.js"></script>
        <script type = "text/javascript">
            main();
        </script>

    </body>
</html>
    //main function
    var
    COLS = 20,
    ROWS = 20,
    canvas,
    ctx,
    keystate,
    KEY_O = 79,
    KEY_N = 78;
    var main = function()
    {
        // create and initiate the canvas element
        canvas = document.createElement("canvas");
        canvas.width = COLS*20;
        canvas.height = ROWS*20;
        ctx = canvas.getContext("2d");
        // add the canvas element to the body of the document
        document.body.appendChild(canvas);
        // sets an base font for bigger score display
        ctx.font = "12px Ariel";
        keystate = {};
        // keeps track of the keybourd input
        document.addEventListener("keydown", function(evt) {
            keystate[evt.keyCode] = true;
        });
        document.addEventListener("keyup", function(evt) {
            delete keystate[evt.keyCode];
        });
        menu1();
    };

    //first menu
    var menu1 = function()
    {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "Red";
        ctx.fillRect(0,0,canvas.height, canvas.width);
        document.addEventListener('keydown', function(event) {
        if (keystate[KEY_N]) {
            menu2();
        }});
    };

    //second menu
    var menu2 = function()
    {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "Blue";
        ctx.fillRect(0,0,canvas.height, canvas.width);
        document.addEventListener('keydown', function(event) {
        if (keystate[KEY_O]) {

            menu1();
        }});
    };

Answer 1

每次拨打menu2();或menu1();时，您都会添加新的EventListener，再次调用menu2();或menu1(); ...以及更多事件监听器每次都添加。这意味着当您持续按键时，您的事件监听器数量会以极快的速度增长，并且会减慢脚本速度。每个键只需要一个EventListener，将其设置在菜单功能之外。

Answer 2

问题是在eventListeners和menu1的每次调用中添加menu2。您需要的只是简单地将其放在主要内容中，如下所示：

 document.addEventListener('keydown', function(event) {
        if (keystate[KEY_N]) {
            menu2();
        }
            if (keystate[KEY_O]) {
                menu1();
            }
        });

<!DOCTYPE html>
<html lang ="en">
    <head>
        <meta charset="UTF-8">
        <title>Snake</title>

    </head>
    <body>
        <style>
        canvas{
            display: block;
            position: absolute;
            border: 1px solid "Black";
            margin: auto;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
        }
        </style>
        <script type = "text/javascript">
    
    var
    COLS = 20,
    ROWS = 20,
    canvas,
    ctx,
    keystate,
    KEY_O = 79,
    KEY_N = 78;
    var main = function()
    {
        // create and initiate the canvas element
        canvas = document.createElement("canvas");
        canvas.width = COLS*20;
        canvas.height = ROWS*20;
        ctx = canvas.getContext("2d");
        // add the canvas element to the body of the document
        document.body.appendChild(canvas);
        // sets an base font for bigger score display
        ctx.font = "12px Ariel";
        keystate = {};
        // keeps track of the keybourd input
        document.addEventListener("keydown", function(evt) {
            keystate[evt.keyCode] = true;
            if (keystate[KEY_N]) {
                menu2();
            }
           
                if (keystate[KEY_O]) {

                    menu1();
                }
        });
        document.addEventListener("keyup", function(evt) {
            delete keystate[evt.keyCode];
        });
        menu1();
    };

    //first menu
    var menu1 = function()
    {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "Red";
        ctx.fillRect(0,0,canvas.height, canvas.width);
       
    };

    //second menu
    var menu2 = function()
    {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "Blue";
        ctx.fillRect(0,0,canvas.height, canvas.width);
       
    };
    main();

    </script>
    
    </body>
</html>

注意：打开代码段窗口然后在其中点击，然后按o和n查看效果。

按下按钮后Javascript变得无法响应

2 个答案: