重新使用 Class 时出现问题/不理解实例化

Question

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

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

首先，我有一个包含一堆 img 元素的 div。它将它们转储到一个数组中，然后从那些跟随鼠标的图像创建拖尾效果。您可以通过 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 class 两次（如果那是一回事），我也会稍微关心性能，但这完全是我的主要问题的次要问题。

我觉得有一个简单的解决方案，但我想念它。向下滚动到注释代码的演示底部 "This doesn't work"

Answer 1

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

跨实例，对于此用例，一个实例应使用 requestAnimationFrame.

进行渲染控制

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

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

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

Answer 2

您发布的代码存在一个主要问题：它使用全局变量来存储 ImageTrail 对象的状态。这是一种非常糟糕的编程习惯，因为它会导致意外行为，并且违背了 class 的初衷。

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

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

重新使用 Class 时出现问题/不理解实例化

Problem re-using a Class / Not understanding instantiation

javascript

class

instantiation

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