當我使用onKeyDown事件時，移動的元素會延遲

我試圖在按住某個鍵（本例中爲向左或向右箭頭）時使元素移動，但當按住某個鍵時，移動會延遲大約一秒鐘。我是否使用了錯誤的事件或者我的代碼有什麼問題？當我使用onKeyDown事件時，移動的元素會延遲

我正在使用onKeyDown事件觸發移動。

<head> 
 
<script> 
 
\t var objX = 100; \t \t 
 
\t function blockMove(e){ 
 
\t \t if (e.keyCode == 37) { //move left 
 
\t \t \t objX-=4; 
 
\t \t \t document.getElementById("object").style.left = objX + "px"; \t 
 
\t \t } else if (e.keyCode == 39) { //move right 
 
\t \t \t objX+=4; 
 
\t \t \t document.getElementById("object").style.left = objX + "px"; \t 
 
\t \t } 
 
\t } \t \t \t 
 
\t </script> 
 
</head> 
 
<body onkeydown="blockMove(event)"> 
 
\t <div id=object style="height:10px;width:80px;background-color:red;position:absolute;top:50px;left:100px"></div> 
 
</body>

來源

2015-11-17 HamMan4Ever

而不是等待鍵「重複」，你應該跟蹤keydown和keyup事件，並讓計時器重複移動動作，當一個鍵是關閉（沒有鍵盤）。 – ebyrob

你正在創造一個打火機，不是嗎？ – monxas

@monxas其實我只是想獲得一些最基本的遊戲機制。 – HamMan4Ever

多多包涵，這是種很長，可能車：（也有擾流板，如果你想自己做）

<head> 
<script> 
    var objX = 100;  
    var leftDown = false; 
    var rightDown = false; 
     function blockMove(e){ 
      if(e.keyCode == 37 && !leftDown) { //move left 
      leftDown = true; 
       objX-=4; 
       document.getElementById("object").style.left = objX + "px"; 
       }else if(e.keyCode == 39 && !rightDown) { //move right 
       rightDown = true; 
        objX+=4; 
        document.getElementById("object").style.left = objX + "px"; 
     }} 
     function stopMove(e) 
     { 
     if(e.keyCode == 37) 
      leftDown = false; 
     if(e.keyCode == 39) 
      rightDown = false; 
     } 
     function timer() 
     { 
     if(leftDown) 
      objX -= 4; 
     if(rightDown) 
      objX += 4; 
     document.getElementById("object").style.left = objX + "px";  
     } 
     setInterval(timer, 100); 
    </script> 
</head> 
<body onkeydown="blockMove(event)" onkeyup="stopMove(event)"> 
    <div id=object 
style="height:10px;width:80px;background-color:red;position:absolute;top:360px;left:100px" 
    ></div> 
</body>

來源

2015-11-17 16:54:25 ebyrob

謝謝！這很好！ – HamMan4Ever

而不是依靠用戶鍵盤重複率，這是最終導致多次調用blockMove，你應該使用計時器來檢查對象是否應該以一致的速度移動（我的下面每20ms例）。這意味着對於所有用戶來說，無論重複率如何設置，這都是一致的體驗。

然後你需要跟蹤對象是否應該移動。通過使用和keyup事件，我們可以跟蹤目前是否左，右壓，那麼就請檢查您的現有blockMove函數內的值：

//object to keep current state of keys 
 
var keys = { 
 
    left: false, 
 
    right: false 
 
}; 
 

 
function keydown(e) { 
 
    //remember "down" state 
 
    if (e.keyCode == 37) 
 
    keys.left = true; 
 
    if (e.keyCode == 39) 
 
    keys.right = true; 
 
} 
 
function keyup(e) { 
 
    //forget "down" state 
 
    if (e.keyCode == 37) 
 
    keys.left = false; 
 
    if (e.keyCode == 39) 
 
    keys.right = false; 
 
} 
 

 
var objX = 100; \t \t 
 
function blockMove(){ 
 
    //now check the key state, rather than the event object 
 
    if (keys.left) { //move left 
 
     objX -= 4; 
 
    } 
 
    if (keys.right) { //move right 
 
     objX += 4; 
 
    } 
 
    document.getElementById("object").style.left = objX + "px"; \t 
 
} 
 

 
//Call the movement function every 20ms 
 
window.setInterval(blockMove, 20);

<body onkeydown="keydown(event)" onkeyup="keyup(event)"> 
 
\t <div id=object style="height:10px;width:80px;background-color:red;position:absolute;top:50px;left:100px"></div> 
 
</body>

隨着討論在下面的評論中，setInterval只保證在函數被調用之前的最短時間，並且可以受到限制。除了移動DOM對象外，學習這樣的基礎知識也很好，但在某些時候，您可能需要查看drawing directly onto <canvas>元素，並使用requestAnimationFrame來處理回調，因爲它是爲動畫設計的，與setTimeout/setInterval不同。

來源

2015-11-17 16:57:52

好，如果你改變速度到10，像素從4到2它甚至更好，並沒有太多傷害眼睛 –

@vtz或像素爲1，速度爲5 – HamMan4Ever

是的 - 這是一個平衡的行爲之間的頻繁你想要在屏幕上移動東西（因此消耗CPU）以及你想要的東西有多光滑。 –

當我使用onKeyDown事件時，移動的元素會延遲

回答

相關問題