ajax 上的 Javascript 不断增长答案

【问题标题】：Javascript on ajax keeps growingajax 上的 Javascript 不断增长
【发布时间】：2023-04-07 13:51:01
【问题描述】：

我有一个带有可配置 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);
}

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

【问题讨论】：

我不完全理解，但它听起来就像您在事件处理程序中附加了一个事件处理程序。在脚本开始时附加一次，或者删除现有的事件处理程序并附加新的事件处理程序，如果有关于新事件处理程序的更具体的内容。抱歉，我无法更具体地了解您的情况，我不确定 requestAnimationFrame 或 render 是做什么的。

标签： javascript jquery ajax three.js

【解决方案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 将是真正的幂等 - 您可以随意调用它多次，但您知道循环只会启动一次。

【讨论】：