Question

我正在学习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>

Answer 1

第一个动画在init()函数中触发，您调用move_par();第二个动画，因为您从setTimeout(move_par, rate);包装器中再次调用该函数。

Answer 2

move_par以setTimeout（move_par，rate）行结束;其中安排了一个新的执行功能，所以看似正常的行为。如果您不想再次调用它，则需要从函数中提前返回。

Answer 3

使用jQuery：

$("#rate").change(function() {
  value = $(this).val();
  $("#ori").css("margin-left",value+'px')
});

然后将margin-left：0添加到#ori元素，它应该可以工作。

demo

是什么让这段代码一遍又一遍地执行

3 个答案: