Javascript ajax 持续增长

Question

我有一个带有可配置 3d 对象的站点，该对象具有一些属性，当我更改这些属性时，我重新加载 div 3d 对象以反映新属性。除了脚本数据不断增加外，它工作正常。不仅脚本在 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);
}

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

Answer 1

当animate第一次被调用时，它会不断地重新调用自己。您正在使用递归来创建连续循环。

我的理解是，每次重新加载时，都会重新调用 animate 函数。如果你第二次调用它，你将有两个连续的 animate 循环发生，交织在同一个 UI 线程上。您的 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 持续增长

Javascript on ajax keeps growing

javascript

ajax

jquery

three.js