Come risolvere ritardo in javascript keydown

Question

Eventuali duplicati:
JavaScript move delay and multiple keystrokes

io sono nuovo e di apprendimento HTML5 canvas insieme con javascript. Ho creato un evento per spostare un oggetto a sinistra ea destra, e il mio problema è il ritardo ogni volta che si tiene premuto il tasto o si passa a un altro tasto. So che manca il mio codice qui sotto, per favore aiutami. Grazie in anticipo.

c.addEventListener('keydown',this.check,true); 
    function check(el) { 
    var code = el.keyCode || el.which; 
    if (code == 37 || code == 65){ 
    x -=1; 
    } 

    if (code == 39 || code == 68){ 
    x += 1; 
    } 

    el.preventDefault(); 
} 

Answer 1

Piuttosto che cercare di reagire direttamente all'evento keydown, io suggerirei di usare gli eventi KeyDown e KeyUp di mantenere un elenco dei quali tasti sono attualmente in giù. Quindi implementa un "loop di gioco" che controlla ogni millisecondo x quali tasti sono giù e aggiorna il display di conseguenza.

var keyState = {};  
window.addEventListener('keydown',function(e){ 
    keyState[e.keyCode || e.which] = true; 
},true);  
window.addEventListener('keyup',function(e){ 
    keyState[e.keyCode || e.which] = false; 
},true); 

x = 100; 

function gameLoop() { 
    if (keyState[37] || keyState[65]){ 
     x -= 1; 
    }  
    if (keyState[39] || keyState[68]){ 
     x += 1; 
    } 

    // redraw/reposition your object here 
    // also redraw/animate any objects not controlled by the user 

    setTimeout(gameLoop, 10); 
}  
gameLoop(); 

Si noterà che questo consente di gestire più tasti contemporaneamente, ad esempio, se l'utente preme sinistra e frecce insieme, e il problema del ritardo tra successivi eventi KeyDown quando un tasto viene premuto va via perché tutto quello che ti interessa davvero è se si è verificato un key-up.

mi rendo conto che non può essere l'implementazione di un gioco, ma questo concetto "gioco loop" dovrebbe funzionare per voi, come mostrato in questo molto semplice demo: http://jsfiddle.net/nnnnnn/gedk6/