javascript - Ajax上的Java脚本不断增长

我有一个带有可配置3d对象的网站，该对象具有一些属性，当我更改这些属性时，我将3d对象重新加载到div中以反映新的属性。除了脚本数据不断添加之外，它都可以正常工作。重新加载30次后，不仅脚本会变慢，而且这是发生的情况。我在渲染功能中添加了旋转对象旋转功能，每次重新加载时，按钮的旋转速度都会更快！重新加载5次后，它会像疯了似的旋转。旋转功能很简单：

    function animate() {
    if (typeof(objektas) !== 'undefined') {
        rotation++;
        if (rotation >= 360) rotation = 0;
        objektas.rotation.y = rotation * Math.PI * 2 / 360;
    }
    requestAnimationFrame(animate, renderer.domElement);
    renderer.render(scene, camera);
}

我的猜测是，每次加载渲染时，这些动画函数都会堆叠在一起，例如在第二次重新加载中，它们被调用两次而不是一次。有人可以解释如何解决这个问题吗？

最佳答案

首次调用animate时，它将不断重新调用自身。您正在使用递归创建连续循环。

我的理解是，每次重新加载时，都会重新调用animate函数。如果第二次调用它，则将在同一UI线程上交织两个连续的animate循环。您的rotation变量将以两倍的速度递增。

再次调用它，您现在有了三个animate循环。调用30次，那么30个交织的循环将导致严重的性能问题。

解决方案：在您第一次调用它的地方，确保只调用一次。

有一个全局变量：

var hasCalledAnimate = false;

在第一次调用它的地方：

if(!hasCalledAnimate) {
   hasCalledAnimate = true;
   animate();
}

如果要绝对100％确保没人能再次调用它，请使用闭包。

   var animate = (function () {
       function _animate() {
           if (typeof (objektas) !== 'undefined') {
               rotation++;
               if (rotation >= 360) rotation = 0;
               objektas.rotation.y = rotation * Math.PI * 2 / 360;
           }
           requestAnimationFrame(_animate, renderer.domElement);
           renderer.render(scene, camera);
       }
       var _hasInvoked = false;
       return function () {
           if (!_hasInvoked) {
               _hasInvoked = true;
               _animate();
           }
       }
   })();

现在animate将真正成为幂等的-您可以随意调用它多次，但是您知道循环只会启动一次。

关于javascript - Ajax上的Java脚本不断增长，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31401651/