Javascript 如何通过按住键而不是重复按来移动图像

这是我的密码

    function leftArrowPressed() {
          document.getElementById("image1").src = "http://orig04.deviantart.net/137f/f/2014/147/3/1/random_character__jet_bear_by_mnrart-d7jwteg.gif";
            var element = document.getElementById("image1");
            element.style.left = parseInt(element.style.left) - 80 + 'px';
        }

        function rightArrowPressed() {
          document.getElementById("image1").src = "http://i.imgur.com/bZTh3Lk.gif";
          var element = document.getElementById("image1");
            element.style.left = parseInt(element.style.left) + 80 + 'px';
        }


         function upArrowPressed() {
          document.getElementById("image1").src = "http://orig04.deviantart.net/137f/f/2014/147/3/1/random_character__jet_bear_by_mnrart-d7jwteg.gif";
          var element = document.getElementById("image1");
            element.style.top = parseInt(element.style.top) - 80 + 'px';
        }


         function downArrowPressed() {
          document.getElementById("image1").src = "http://i.imgur.com/bZTh3Lk.gif";
          var element = document.getElementById("image1");
            element.style.top = parseInt(element.style.top) + 80 + 'px';
        }

        function moveSelection(event) {                    
            switch (event.keyCode) {
                case 37:
                    leftArrowPressed();
                break;


                case 39:
                    rightArrowPressed();
                break; 

                case 38:
                    upArrowPressed();
                break;

                case 40:
                    downArrowPressed();
                break;

---

目前，我必须不断按下并释放以使其移动。我希望能够按住键。

1。-您可以声明一个全局变量来存储方向。（我使用字符串是为了使代码易于理解）

2.-现在，在“移动选择”功能中，您可以更改此值

3.-使用setInterval每X毫秒执行一个函数，在此函数中，将图像移动到全局变量中存储的方向。例如：

function mainLoop()
{ 
    if(dir == "right")
        MoveToright()
    else if (dir == "up")
        MoveUp();
}

setInterval (mainLoop, 100) ; // 100 ms 

使用window.setInterval

定义全局变量：

var timerId = null;

对于每个功能的更改：

case 37:
     leftArrowPressed();

到

并将leftArrowAnimate（）定义为

最后，您还需要捕获key up事件并停止计时器：

 // handle the key up event
 function moveSelectionFinished(event) {                    
        switch (event.keyCode) {
            case 37:
                window.clearTimeout(timerId);
            break;
// etc...

---

您还没有包含创建按键事件句柄的代码。请尝试使用onkeydown（）事件对象触发moveSelection（），并将其置于requestAnimationFrame循环中，其中onkeyup（）为取消animationframe。快速建议，但使用当前代码循环Alexander建议的序列将导致抖动。也许您应该缓存top样式值并使用它，而不是重复查询和编写。此代码更简单，但我优先选择Alexander H.的代码，因为您不按任何按钮，没有在Background中运行的函数而不是setTimeout。您还可以使用requestAnimationFrame来提高动画性能。如果您只关心支持现代浏览器，并附带需要捕获关键帧和状态（向上/向下）的警告，那么这可能会更流畅在全局变量中，取消并启动动画。此时将进入图片。

   case 37:
      leftArrowAnimate();

// this will fire leftArrowPressed every 100 milliseconds
function leftArrowAnimate()
{
     timerId = window.setTimeout(leftArrowPressed(), 100);
}

 // handle the key up event
 function moveSelectionFinished(event) {                    
        switch (event.keyCode) {
            case 37:
                window.clearTimeout(timerId);
            break;
// etc...