JQuery and setTimeout() not working

Question

I am using JQuery to monitor key presses for an HTML game, but whenever I add the jquery code to my gameloop then I get an error about keydown not being defined.

<html>
    <head>
        //...Included JS files JQuery, and a JQuery plugin to bind keydown
        //   to a variable and to translate all the keypresses into
        //   names so that we can monitor keypress by keydown.left...
    </head>
    <body>
        <script type="text/javascript">
            var gLoop;
            //...code excluded for brevity...
            var GameLoop = function() {
                //...code excluded...
                if(keydown.left) {
                    //do stuff
                }
                gLoop = setTimeout(GameLoop, 1000/50);
            }
        </script>
    </body>
</html>

This code gets an error saying keydown is undefined. When ever I tried this code:

    setInterval(function(){
        if(keydown.left) alert("Working");
    }, 1000/50);

It works fine!!! What am I doing wrong??? My full code is on GitHub here.

I used jQuery version 1.4.4. I used the hotkeys plugin which is available at https://raw.github.com/figitaki/PuzzleMan/master/key_status.js And here is the code I used to bind keydown:

$(function() {
  window.keydown = {};

  function keyName(event) {
    return jQuery.hotkeys.specialKeys[event.which] ||
      String.fromCharCode(event.which).toLowerCase();
  }

  $(document).bind("keydown", function(event) {
    keydown[keyName(event)] = true;
  });

  $(document).bind("keyup", function(event) {
    keydown[keyName(event)] = false;
  });
});

UPDATE:

I no longer get an error when I run the code but I do not get any response by pressing the left key.

Are you calling the function GameLoop before you have initialized window.keydown? — Dan Prince, May 06 '12 at 01:02
No, I initialized it in external files I included in the head of the document. — Figitaki, May 06 '12 at 01:03
In that case, have you tried wrapping your inline Javascript within a window.onload function so that you can be sure that your external files have been loaded? — Dan Prince, May 06 '12 at 01:05
And where is keydown defined? Where is the jQuery code. You do not show enough info. — epascarello, May 06 '12 at 01:09
I added the requested information, but I don't think that this is the problem, when I used setInterval() it works fine. — Figitaki, May 06 '12 at 01:20
Sorry I just realized that in the second code block I put setTimeout but I actually put setInterval — Figitaki, May 06 '12 at 01:23

Fabrício Matté · Accepted Answer · 2012-05-06T01:31:57.820

1

Try gLoop = setTimeout("GameLoop();", 1000/50);

I wasn't able to call your function the way you defined the setTimeout.

Javascript code should be loaded sequentially, but wrapping your code inside a $(document).ready will make sure it's being fired by the first time after your external files are loaded.

  $(document).ready(function(){
        var gLoop;
        //...code excluded for brevity...
        var GameLoop = function() {
            //...code excluded...
            if(keydown.left) {
                //do stuff
            }
            gLoop = setTimeout("GameLoop();", 1000/50);
        }
  });

edited May 06 '12 at 01:31

answered May 06 '12 at 01:21

Fabrício Matté

69,329
26
129
166

I haven't had errors with that before. If I take the if(keydown.left) statement out of the GameLoop function the entire script runs perfect. – Figitaki May 06 '12 at 01:25
did you try `$(document).ready()` yet? Just to make sure it isn't the problem. – Fabrício Matté May 06 '12 at 01:34
Still returning the `keydown` not defined error? I'll take a deeper look into the code then. – Fabrício Matté May 06 '12 at 01:36
Always wrap your code inside `$(document).ready()` to prevent its execution before the page is fully loaded. It does magic tricks like that one quite often. :D Actually, more like preventing random bugs than magic tricks, but yeah. – Fabrício Matté May 06 '12 at 01:38

score 0 · Answer 2 · edited May 23 '17 at 11:48

0

Did you define KeyDown? Here's a related article for your keypresses.

Binding arrow keys in JS/jQuery

edited May 23 '17 at 11:48

Community

1
1

answered May 06 '12 at 01:05

xivo

2,054
3
22
37

Yes, I know that I did because when I just cut all the extra code and used setTimeout(function(){if(keydown.left) alert("Working");}, 1000/50); It worked perfectly. – Figitaki May 06 '12 at 01:08

JQuery and setTimeout() not working

2 Answers2