Javascript becomes unresponsive after button presses
Question
When I push the buttons (N and O ) maybe 10 times, the script becomes very unresponsive, does anyone have a solution for this? What I'm trying to do is to have 2 menus in a game. This is a test which should have the same effect.
//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();
}});
};
2 answers
solution1
0 2015-11-12 13:46:52
Each time you call menu2(); or menu1(); you are adding a new EventListener , which again calls menu2(); or menu1(); ...and more event listeners get added every time. This means that your number of event listeners grows at an enormous rate as you keep pressing keys, and slows the script down. You only need one EventListener per key, set it outside of the menu function.
solution2
0 2015-11-12 13:54:07
issue is with adding eventListeners on each call of menu1 and menu2 .what you need is simply put it out side of both in main like this:
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>
Note: open snippet window then click inside it then press o and n to see the effect.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.