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

Question

更新 - 这里的 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 类实例化两次（如果这甚至是一件事），我也有点担心性能，但这完全是我的主要问题的次要问题。

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

Answer 1

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

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

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

每次创建一个新实例时，它都会通过 取消早期实例的渲染请求（通过 完成requestAnimationFrame），甚至cancelAnimationFrame 我也取消了渲染方法中完成的请求。

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