按下按钮后 Javascript 变得无响应

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

问题是在每次调用menu1和menu2时添加eventListeners 。你需要的只是把它放在 main 的一边，像这样：

 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 个解决方案

解决方案1
0 2015-11-12 13:46:52

解决方案2
0 2015-11-12 13:54:07

按下按钮后 Javascript 变得无响应

问题描述

2 个解决方案

解决方案1 0 2015-11-12 13:46:52

解决方案2 0 2015-11-12 13:54:07

解决方案1
0 2015-11-12 13:46:52

解决方案2
0 2015-11-12 13:54:07