Question

I created a map where a user can walk from one building to another. Next to the map there’s a small minimap. The “big” map just refreshes by using the load() command. I have got the following code:

    $(document).keydown(function(event) {

        switch (event.keyCode) {

            // A
            case 65: $("#world").load("../modules/Map.php?go&move=w"); break;

            // W
            case 87: $("#world").load("../modules/Map.php?go&move=n"); break;

            // D
            case 68: $("#world").load("../modules/Map.php?go&move=e"); break;

            // S
            case 83: $("#world").load("../modules/Map.php?go&move=s"); break;

        }

    });

Now, right after pressing one of the keys, I want the following to be executed:

$("#minimap").load("../modules/Minimap.php");

I hope you can help me.

Answer 1

You have two choices, but first, let’s refactor slightly (I’ll refactor more in a moment, but let’s start with this):

$(document).keydown(function(event) {
    var direction;

    switch (event.keyCode) {

        // A
        case 65: direction = 'w'; break;

        // W
        case 87: direction = 'n'; break;

        // D
        case 68: direction = 'e'; break;

        // S
        case 83: direction = 's'; break;
    }

    if (direction) {
        $("#world").load("../modules/Map.php?go&move=" + direction);
    }
});

Now the first load is centralized and we’re not repeating ourselves.

Okay, you have two choices:

1. Put it after the switch statement if you want both loads to happen at the same time. E.g., picking up at the end:

   if (direction) {
       $("#world").load("../modules/Map.php?go&move=" + direction);
       $("#minimap").load("../modules/Minimap.php");
   }
   

   I’ve assumed there that we only want to do it if a key matched. If I’m wrong, move it out of the if.

2. Use the success callback on the first load if you want the second load to wait until the first one is complete.

   if (direction) {
       $("#world").load("../modules/Map.php?go&move=" + direction, function() {
           // This gets called when the load completes
           $("#minimap").load("../modules/Minimap.php");
       });
   }
   

More in the docs.

---

Here’s the more thoroughly refactored version: Have this:

var directionKeyMap = {
    '65': 'w',  // A
    '87': 'n',  // W
    '68': 'e',  // D
    '83': 's'   // S
};

And then either this (option 1 above):

$(document).keydown(function(event) {
    var direction;

    direction = directionKeyMap[event.keyCode];
    if (direction) {
        $("#world").load("../modules/Map.php?go&move=" + direction);
        $("#minimap").load("../modules/Minimap.php");
    }
});

Or this (option 2 above):

$(document).keydown(function(event) {
    var direction;

    direction = directionKeyMap[event.keyCode];
    if (direction) {
        $("#world").load("../modules/Map.php?go&move=" + direction, function() {
            $("#minimap").load("../modules/Minimap.php");
        });
    }
});

Those use an object to map keycodes to directions, taking advantage of the fact you can look up object properties using bracketed notation.

(Don’t worry that keyCode is a number but the keys in our map are strings; whenever you use bracketed notation, whatever you give is converted to a string by the JavaScript interpreter. In fact, that’s the case even when you index into an array, since JavaScript arrays aren’t really arrays. But again, we’re using a plain object, not an array.)