Javascript：带参数的函数导致动画滞后答案

【问题标题】：Javascript: function with parameters cause lag in animationJavascript：带参数的函数导致动画滞后
【发布时间】：2014-12-31 05:26:15
【问题描述】：

首先：我尝试搜索类似的问题，但除了我在标题中的做法之外，我真的不知道如何描述这个问题。因此，如果某处已经有解决方案，请告诉我。

我正在尝试了解 OOP 在 javascript 中的工作原理。我有一些操作脚本的经验。为了练习，我写了这段代码。当页面加载时，它使一个框从左向右移动。现在我想重写代码，如果我想创建多个动画框，我不需要数百个函数来处理同一种动画。

这是我的旧代码，有效：

<script>

    var dx = 850;
    var x = 0;
    var y = 450;

    function init() {
        b = document.getElementById("box1");

        moveIt();
    }

    window.requestAnimFrame = (function() {
        return  window.requestAnimationFrame OR
                window.webkitRequestAnimationFrame OR
                window.mozRequestAnimationFrame OR
                window.oRequestAnimationFrame OR
                window.msRequestAnimationFrame OR
                function (/* function */ callback, /* DOMElement */ element)
                {
                    window.setTimeout(callback, 1000 / 60);
                };
        })();

    function moveIt() {
        x += (dx - x) * 0.15;

        b.style.left = x + "px";
        b.style.top = y + "px";

        requestAnimFrame(moveIt, b);

    }


    </script>

</head>

<body onload="init()">

    <div style="width:50px;height:50px;background:blue;position:absolute;" id="box1"></div>


</body>

这是第二个版本，我尝试让动画的功能更加动态。它似乎确实有效，但似乎滞后，或者它根本不做动画，我不确定，因为它很难检查。

<script>


    function init() {
        b = document.getElementById("box1");

        moveIt(b, 0, 850, 0, 450);
    }

    window.requestAnimFrame = (function() {
        return  window.requestAnimationFrame OR
                window.webkitRequestAnimationFrame OR
                window.mozRequestAnimationFrame OR
                window.oRequestAnimationFrame OR
                window.msRequestAnimationFrame OR
                function (/* function */ callback, /* DOMElement */ element)
                {
                    window.setTimeout(callback, 1000 / 60);
                };
        })();

    function moveIt(theobject, x, endx, y, endy) {
        x += (endx - x) * 0.15;
        y += (endy - y) * 0.15;

        theobject.style.left = x + "px";
        theobject.style.top = y + "px";

        requestAnimFrame(moveIt(theobject, x, endx, y, endy), b);

    }


    </script>

</head>

<body onload="init()">

    <div style="width:50px;height:50px;background:blue;position:absolute;" id="box1"></div>


</body>

由于我正忙于学习这些东西，我很好奇我可以为此做出的任何改进。

【问题讨论】：

标签： javascript function animation parameters lag

【解决方案1】：

您正在运行一个无限循环。您必须为动画停止提供条件。在我的代码中，这只是一个示例。

试试：

<div id="box1" style="position: absolute">x</div>
<button onclick="init();">Test</button>

<script type="text/javascript">
var xInit, yInit;
function init() {
    b = document.getElementById("box1");
    xInit = 0;
    yInit = 0;
    moveIt(b, xInit, 850, yInit, 450);
}

function moveIt(theobject, x, endx, y, endy) {
    x += Math.floor((endx - xInit)*0.01);
    y += Math.floor((endy - yInit)*0.01);

    theobject.style.left = x + "px";
    theobject.style.top = y + "px";

    if ( x < endx )
        requestAnimationFrame(function() {moveIt(theobject, x, endx, y, endy)});
}
</script>

【讨论】：

感谢您的回复！我意识到 if 语句也可以解决它。但不幸的是，它并没有解决我的问题。我仍然看不到动画，它只是从一开始就出现在目的地。
哦，哎呀。抱歉，我没有注意到按钮！我的错。不过现在试了一下。但仍有滞后。它对你有用吗？
好吧，我忽略了一些事情（你必须将 requestAnimationFrame 参数指定为回调）。我修改了代码，现在可以正常工作了
好的！伟大的！这现在确实有效。非常感谢。 :)
请将答案标记为正确，以便其他用户学习。