每秒重复的简单 Javascript 循环答案

【问题标题】：Simple Javascript loop that repeats each second每秒重复的简单 Javascript 循环
【发布时间】：2011-05-03 04:41:32
【问题描述】：

我正在编写代码来移动浏览器游戏中的角色。我设法获得了它必须在水平和垂直方向上每秒移动的像素。

pxsecx 是每秒必须水平移动的像素数 pxsecy 相同但垂直

基本上应该将它们 += 到当前的水平和垂直位置。

我需要循环每秒不断重复，直到元素位置遇到新位置（newx）。

这是我目前为止的：

<body onmousedown="showCoords(event)">
<script type="text/javascript">
function showCoords(evt){
  oldx = parseInt(document.getElementById("character").style.left);
  oldy = parseInt(document.getElementById("character").style.top);

  width = parseInt(document.getElementById("character").style.width);
  height = parseInt(document.getElementById("character").style.height);

  newx = evt.pageX - width/2;
  newy = evt.pageY - height/2;

  disx = newx - oldx;
  disy = newy - oldy;

  diag = parseInt(Math.sqrt(disx*disx + disy*disy));

  speed = 50;

  secs = diag/speed;

  pxsecx = disx/secs;
  pxsecy = disy/secs;

     while(document.getElementById("character").style.left<newx)
      {
      document.getElementById("character").style.left += pxsecx;
      document.getElementById("character").style.top += pxsecy;
      }
}
</script>

一切正常，直到我不知道该怎么做才能让它每一秒都正常工作。我在这里测试：http://chusmix.com/game/movechar.php

如何让它每秒重复一次以使其正常工作？

谢谢

【问题讨论】：

标签： javascript

【解决方案1】：

JavaScript 主要是异步的，因此您需要稍微重写一下。 setTimeout 在一定时间后执行一个函数。因此，您可以这样做：

(function move() {
    var character=document.getElementById("character");
    if(character.style.left<newx) {
        character.style.left += pxsecx;
        character.style.top += pxsecy;
        setTimeout(move, 1000);
    }
})();

【讨论】：

感谢您的回答，能否请您告诉我如何将它包含到我的脚本中。我试过了，但我对javascript很糟糕。你能粘贴最后的代码吗？我不知道如何将其包含在内。非常感谢
用它替换你当前的while循环。
您在 if 语句中比较的值不是同一类型是否重要。 if("100px" < 432) 似乎总是返回 false。尽管很接近，但这似乎不是有效的代码。你能仔细检查一下吗？我认为一旦您的类型相同，这将起作用，但不是当前格式。
@jmort253：如果它们都是数字但一个在字符串中，它会起作用。只是"px" 使它无法被识别为数字。当我发布它时，我意识到这不太适用，但 OP 的原始代码也没有。我认为这只是伪代码，他们会在以后添加不同的变量或正确解析数字。
很好的答案。 +1。实际上，我花了足够的时间处理您发布的内容，知道如果 OP 处理“px”剥离部分，它将起作用。既然他接受了你的回答，我假设他确实明白了:)

【解决方案2】：

你可以使用函数setInterval(function, interval)

// To start the loop
var mainLoopId = setInterval(function(){
    // Do your update stuff...
    move();
}, 40);

// To stop the loop
clearInterval(mainLoopId);`

【讨论】：

时间间隔（本例中为40），以毫秒为单位。

【解决方案3】：

您需要 JavaScript setTimeout() 函数。它每 n 毫秒调用一个函数。

【讨论】：

毫秒，而不是微秒。
虽然您可以使用 setTimeout 来完成一点编码，但您必须寻找 setInterval 来为您完成。
这是错误的。 setTimeout 调用一个函数仅一次。要重复调用，请使用setInterval。

【解决方案4】：

我制作了一个咖啡脚本类来处理时间循环，也许它会对某人有所帮助。

# Classe TimeLoop, execute a function every x miliseconds
#
# @example How o create a loop
#   myLoop = new TimeLoop((-> alert("loop"),1000)
#   myLoop.start()
#
class window.TimeLoop
  constructor: (@function,@miliseconds) ->

  # Start loop.
  #
  start: -> @loop = setInterval @function, @miliseconds

  # Stop loop.
  #
  stop: -> clearInterval(@loop)

要点链接：https://gist.github.com/germanotm/6ee68f804860e2e77df0

【讨论】：