每秒重复的简单 Javascript 循环
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5865089/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simple Javascript loop that repeats each second
提问by lisovaccaro
I'm writing a code to move a character in a browser game. I managed to get the pixels it must move per second both horizontally and vertically.
我正在编写代码以在浏览器游戏中移动角色。我设法获得了它每秒必须在水平和垂直方向移动的像素。
pxsecx is the number of pixels it must move horizontally per second pxsecy is the same but vertically
pxsecx 是每秒必须水平移动的像素数 pxsecy 相同但垂直
Basically it should += them to the current horizontal and vertical position.
基本上它应该 += 它们到当前的水平和垂直位置。
I need the loop to keep repeating itself every second until the element position meets the new position (newx).
我需要循环每秒重复一次，直到元素位置遇到新位置（newx）。
This is as far as I have gone:
就我而言，这是：
<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>
Everything works until the while where I have no idea how to do make it work every second. I'm testing it here: http://chusmix.com/game/movechar.php
一切正常，直到我不知道如何让它每秒都工作。我在这里测试：http: //chusmix.com/game/movechar.php
How do I make it repeat that once a second so it works?
我如何让它每秒重复一次以使其有效？
thanks
谢谢
回答by icktoofay
JavaScript is primarily asynchronous, so you'll need to rewrite this a little. setTimeoutexecutes a function after a certain amount of time. Therefore, you can do this:
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);
}
})();
回答by B0ltz
You can use the function setInterval(function, interval)
您可以使用该功能 setInterval(function, interval)
// To start the loop
var mainLoopId = setInterval(function(){
// Do your update stuff...
move();
}, 40);
// To stop the loop
clearInterval(mainLoopId);`
回答by Germano
I made a coffescript class to handle time loops, maybe it will be helpful for someone.
我做了一个 coffescript 类来处理时间循环，也许它会对某人有所帮助。
# 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)
link to gist: https://gist.github.com/germanotm/6ee68f804860e2e77df0
要点链接：https: //gist.github.com/germanotm/6ee68f804860e2e77df0
回答by Charlie Martin
You want the JavaScript setTimeout()function. It calls a function every n milliseconds.
您需要 JavaScriptsetTimeout()函数。它每 n 毫秒调用一个函数。
