Ignoring delay when a key is held down?

Question

Checked out other posts, no help...

I'm using asdw to move an object around within a limited space. I'm trying to figure out how to allow the object to move around while the key is pressed, without the momentary delay at the beginning.

Thanks...

$(document).ready(function(){
    var longitude = 0;
    var latitude = 0;

    $('body#sense').keypress(function(){
        if(event.which == 65 || event.which == 97){
            // Left
            if(longitude != 0){
                longitude = longitude + 10;
                $('img#map').css('margin-left', longitude);
            }
        }
        else (event.which == 68 || event.which == 100){
            // Right
            if(longitude > -200){
                longitude = longitude - 10;
                $('img#map').css('margin-left', longitude);
            }
        }
    });
});

The web page

    <body id="sense">

<h2><center>Use your 'asdw' keys to move the map around</center></h2>

<div id="box">

<img id="map" src="http://www.toronto.ca/culture/victoria-square/images/ch0/Victoria-Square-map-t.gif" alt="" />


</div>

</body>

The holding the image has a set width and height, both smaller than the image. The is set to overflow:hidden, so the javascript moves the image around within the div so different parts are visible.

The CSS

div#box {
    margin:0px auto;
    width:225px;
    height:225px;
    overflow:hidden;
}

div#box img {

}

Um, what do you mean? Which html, of the object or the whole page? — Robbie, Sep 16 '11 at 02:15
the object; I'm not sure how it's suppsoed to work. Show the map and sense id objects in their context — bozdoz, Sep 16 '11 at 02:27
Hope that helps; if it's not good I'll just throw in the address. — Robbie, Sep 16 '11 at 02:33
Understood. I would recommend using animate instead of css. That might be the glitchy part. I tested your code with css, and I couldn't stop the delay. Good luck! — bozdoz, Sep 16 '11 at 03:37
P.S. using `$("#sense")` is better and faster than `$("body#sense")` and generates the same outcome. — jfriend00, Sep 16 '11 at 03:42

score 2 · Accepted Answer · answered Sep 16 '11 at 03:19

Use the keyDown event and then start your own timer interval to control your own repeat interval (ignore the system repeat interval) and then cancel the timer on keyUp. Ignore the other key events. You can pick your own repeat time in the setInterval calls.

var timer = null;

function increaseLongitude() {
    // your code here
}

function decreaseLongitude() {
    // your code here
}

$("#sense").keyDown(function(e) {
    if (!timer) {
        if (e.which == 65 || e.which == 97) {
            timer = setInterval(increaseLongitude, 100);
            increaseLongitude();
        } else if (e.which == 68 || e.which == 100) {
            timer = setInterval(decreaseLongitude, 100);
            decreaseLongitude();
        }
    }
});

$("#sense").keyUp(function(e) {
    if (timer) {
        clearInterval(timer);
        timer = null;
    }
});

Not quite, but this is definitely helping me head in a different direction on some other stuff. Thanks — Robbie, Sep 16 '11 at 04:01

score 0 · Answer 2 · answered Sep 16 '11 at 02:00

0

Try using the keydown event instead

answered Sep 16 '11 at 02:00

hugomg

68,213
24
160
246

score 0 · Answer 3 · answered Sep 16 '11 at 03:26

0

Checkout this version of your code. it can be done with 'keydown' event. I believe this is the ideal way it should be done.

http://jsfiddle.net/valllabh/yFxDN/10/

answered Sep 16 '11 at 03:26

vallabh joshi

143
10

Thanks, but even in that display, the delay is happening. Really cool tool, though. – Robbie Sep 16 '11 at 03:30

Ignoring delay when a key is held down?

3 Answers3

Linked