重用類的問題/不理解實例化

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 類實例化兩次（如果這甚至是一件事），我也有點擔心性能，但這完全是我的主要問題的次要問題。

我覺得有一個簡單的解決方案，但我很想念它。 向下滾動到演示底部的注釋代碼“這不起作用”

Answer 1

主要原因是requestAnimationFrame作為構造函數和渲染方法的一部分。

跨實例，對於這個用例，一個實例應該使用requestAnimationFrame具有渲染控制。

對於這個用例，我在這里做了一個技巧。

每次創建新實例時，它都會通過cancelAnimationFrame取消先前實例的渲染請求（由requestAnimationFrame完成），即使我也取消了在渲染方法中完成的請求。

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

Answer 2

您發布的代碼有一個主要問題：它使用全局變量來存儲 ImageTrail 對象的狀態。 這是一種非常糟糕的編程實踐，因為它會導致意想不到的行為，並且首先違背了擁有類的目的。

之所以只顯示第一組圖片，是因為 ImageTrail 的兩個實例都使用requestAnimationFrame注冊了下一個動畫幀的回調。 第一個實例的回調（ render ）總是首先被調用，因為它首先注冊了監聽器。 第一個渲染函數更新全局mousePos變量。 第二個render函數認為鼠標沒有移動，因為lastMousePos和mousePos是一樣的。

現在解決您的問題：首先，您應該將 ImageTrail 使用的所有狀態移動到類 itef 中。 這包括mousePos 、 cacheMousePos和lastMousePos 。 如果你已經成功地做到了這一點，如果你有兩個實例，你應該同時得到兩個圖像集。 要激活/停用 ImageTrails 的渲染，您可以添加一個活動屬性，在每次渲染調用時都會檢查該屬性，或者您可以實現取消/設置特定實例的動畫幀的方法。 （有關如何使用cancelAnimationFrame詳細信息，您可以查看rahul或MDN的答案）