重用类/不理解实例化的问题答案

【问题标题】：Problem re-using a Class / Not understanding instantiation重用类/不理解实例化的问题
【发布时间】：2020-03-20 04:05:42
【问题描述】：

更新 - JSFiddle 演示在这里：https://jsfiddle.net/vb2ptmuo/11/

我正在玩我遇到的一个有趣的效果：https://tympanus.net/codrops/2019/08/07/image-trail-effects/

首先，我有一个 div 包含一堆 img 元素。它将它们转储到一个数组中，然后从跟随鼠标的那些图像创建一个轨迹效果。您可以通过new ImageTrail(".content") 开始这一切。但是，如果我有不止一组图像并且我想用这些图像再次重新触发它呢？示例：

    <div class="content">
        <img src="1.jpg">
        <img src="2.jpg">
        <img src="3.jpg">
    </div>
    <div class="content-2">
        <img src="4.jpg">
        <img src="5.jpg">
        <img src="6.jpg">
    </div>

执行第二个new ImageTrail(".content-2") 不会用第二组图像替换第一组图像，即使我读到的代码应该是这样。您仍然只能看到轨迹中的第一组图像。

如果我两次实例化 ImageTrail 类（如果这甚至是一件事），我也会稍微担心性能，但这完全是我的主要问题的次要问题。

我觉得有一个简单的解决方案，但我错过了。向下滚动到演示底部的注释代码“这不起作用”

【问题讨论】：

我现在就开始。我应该提一下，完整的源代码可在我提供的链接中找到 - 我所做的唯一修改是将图像的 div 容器分成两个单独的容器并尝试调用第二组。
帮我理解第二组图片的用途？为什么不在第一组中只包含图像 4-6？
@JamesHill 根据某种触发器上下文切换它们

标签： javascript class instantiation

【解决方案1】：

主要原因是requestAnimationFrame作为构造函数和渲染方法的一部分。

跨实例，对于这个用例，一个实例应该有使用requestAnimationFrame的渲染控制。

我在这里做了一个技巧，用于这个用例。

每次创建新实例时，都会通过cancelAnimationFrame 取消之前实例的渲染请求（由requestAnimationFrame 完成）即使我也取消了在渲染方法中完成的请求。

查看此 jsfiddle 以获取修改后的代码：https://jsfiddle.net/rahultarafdar/mfboqy9g/45/

【讨论】：

@daveycroqet，如果它满足您的需求，请告诉我。

【解决方案2】：

您发布的代码有一个主要问题：它使用全局变量来存储 ImageTrail 对象的状态。这是一种非常糟糕的编程实践，因为它会导致意外行为，并违背了最初创建类的目的。

之所以只显示第一组图片，是因为 ImageTrail 的两个实例都使用requestAnimationFrame 为下一个动画帧注册了回调。第一个实例的回调 (render) 总是首先被调用，因为它首先注册了监听器。第一个渲染函数会更新全局 mousePos 变量。第二个渲染函数认为鼠标没有移动，因为lastMousePos和mousePos是一样的。

现在解决您的问题：首先您应该将 ImageTrail 使用的所有状态移动到类 itef。这包括mousePos、cacheMousePos 和lastMousePos。如果你成功地做到了，你应该让两个图像集同时 diyplaying，如果你有两个实例。要激活/停用 ImageTrails 的渲染，您可以添加一个 active 属性，在每次渲染调用时都会检查该属性，或者您可以实现为特定实例取消/设置动画帧的方法。（有关如何使用cancelAnimationFrame的详细信息，您可以查看rahul或MDN的答案）

【讨论】：