问题重用了类/无法理解实例化

Question

bounty到期在5天内。该问题的答案有资格获得+ 50声望赏金。daveycroqet想要引起更多关注对此问题。

更新-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完成）甚至我也取消了在render方法中完成的请求。

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