如何通过按住键而不是重复按下来使我的图像移动

Question

这是我的代码

    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;

目前我必须不断按下并释放才能移动我希望能够按住键

Answer 1

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

var dir = "none";

2.- 现在，在您的 "moveSelection" 函数中您可以更改此值。

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

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

setInterval (mainLoop, 100) ; // 100 ms

Answer 2

使用window.setInterval

定义一个全局变量：

var timerId = null;

对于您的每个函数更改：

case 37:
     leftArrowPressed();

到

   case 37:
      leftArrowAnimate();

并将 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...

如何通过按住键而不是重复按下来使我的图像移动

How do I make my image move by hold the key and not repetitively pressing

javascript

image

move