我正在学习JS，目前正在学习MTA考试，所以我不是你所看到的专家。我不明白使此代码一遍又一遍地执行的元素在哪里。
当文档加载时，调用init()，它会获取要移动的元素，然后调用move_par()
在这里，该函数移动元素直到它达到 300。为什么在执行之后它会重新开始？
你能帮忙吗？谢谢
这是代码
<!DOCTYPE html>
<html>
<head>
<title> Animation</title>
<script type="text/javascript">
function move_par() {
current += 1;
if (current > 300) {
current = 0;
}
par.style.left = current;
var rate = document.getElementById("rate").value;
setTimeout(move_par, rate);
}
function init() {
par = document.getElementById("ori");
par.style.position = "absolute";
current = 0;
move_par();
}
</script>
</head>
<body onload="init();">
<h1> animation with js</h1>
<form>
<input id="rate" type="number" value="18" min="1" max="100">
</input>
</form>
<p id="ori"> Do you see me moving?</p>
</body>
</html>
第一个动画在调用move_par();的 init() 函数中触发 触发第二个动画是因为您从setTimeout(move_par, rate);包装器中再次调用该函数。
move_par以setTimeout（move_par，rate）行结束;它调度函数的新执行，所以这似乎是正常的行为。如果您不想再次调用该函数，则需要更早地从函数返回。
使用 jQuery：
$("#rate").change(function() {
value = $(this).val();
$("#ori").css("margin-left",value+'px')
});
然后将左边距：0 添加到 #ori 元素，它应该可以工作。
演示