计时 javascript 和 src 更改？

Question

好的，所以我有这个 javascript，当我按下箭头键时，可以使用箭头键发送这些 javascript。我有一个协作脚本，可以使正确的（'img'）命令移动图像，但我试图在图像随着 src 更改和延迟而移动时更改图像。帮助？

<script type="text/javascript">
document.onkeydown = KeyCheck;       
function KeyCheck(event) {

  var spacebar=32
  var KeyID = event.keyCode;
  switch(KeyID) {

      case 39:
        right('img'); 
        document.getElementById('img').src = 'guyr.png';
        setTimeout("right('img'); 
        document.getElementById('img').src = 'runr.png'; 
        setTimeout("right('img'); 
        document.getElementById('img').src = 'guyr.png';",100);",100);
      break;

   }

}
</script>

Answer 1

更改图像的 src 属性将触发异步 GET 请求，并且在浏览器缓存图像之前一开始可能会很慢。看起来你正在实现某种游戏？我不会更改单个图像的 src ，而是最初隐藏所有图像，并切换要显示/隐藏的图像的 visibility CSS 属性。这样，您就可以预取加载期间需要的所有图像，并简单地显示/隐藏元素作为 onkeydown 事件的处理程序。

Answer 2

如果您想做某种游戏或动画，请尝试阅读一些相关内容，了解如何构建游戏循环、动画等。

但是，如果您只是做某种测试，请尝试这样的事情，这不是一个很好的选择。漂亮的代码，但动画的想法应该可行：

document.onkeydown = KeyCheck;

function KeyCheck(event) {

    var spacebar = 32;
    var KeyID = event.keyCode;

    switch (KeyID) {

    case 39:

        function guy(fn) {
            right('img');
            document.getElementById('img').src = 'guyr.png';
            setTimeout(function() {
                fn(guy);
            }, 100);
        }
        function run(fn) {
            right('img');
            document.getElementById('img').src = 'runr.png';
            setTimeout(function() {
                fn(run);
            }, 100);
        }

        guy(run);

        break;
    }

}

一个函数调用另一个函数，通过参数接收它，以便继续动画。