画像ギャラリーで画像を切り替えていくと次第に重くなる

Question

こちらの画像ギャラリーとこちらの画像ギャラリーはみためは同じですがコードが少し違います。前者は画像が快適に切り替わります。しかし、後者は次第に重くなっていきついに何の反応もしなくなってしまいます。

この原因を教えていただきたいです。

後者は前者のコードを少し変更したものです。
変更点

• htmlからmodalSentenceクラスのpタグを削除し、そのpタグはJS上で作るようにした
• 下のコードを追加

while(modalContainer[0].firstChild) modalContainer[0].removeChild(modalContainer[0].firstChild);

• modalAppear関数の中にあるif文を変更

ーー追記ーー
表示環境

CPU：Core(TM) i7-8750H
メモリ：32GB（31.8GB使用可能）
ブラウザ：Chrome
Chromeバージョン：70.0.3538.102（Official Build） （64 ビット）
OS：Windows 10 Home

Comments

[退会済みユーザー]

ご覧になった環境(CPUやメモリ、ブラウザの種類やOS・ブラウザのバージョン等も載せていただけませんか？
当方の手持ちの環境ではそのような挙動がなかったもので...(iPhoneでしかまだ見てませんが)

[ryoo_chksl]

環境を質問文本文下に追記しました。書き方がよく分からなかったのですが、あの書き方でよかったでしょうか？

[退会済みユーザー]

大丈夫です

Answer 1

後者はmodalAppear関数を再帰していますが、その度にclickイベントが登録されていくので、modalAppear関数の呼び出し回数が2回、4回、8回……と倍々に増えていくと思います。

---

失礼、再帰と呼ぶべきじゃないですね。clickイベント内でmodalAppear関数が呼ばれ、その中でまた自身を呼び出すclickイベントが登録されているので、倍々に増えていく、というのが正しいかもです。

Comments

[ryoo_chksl]

前者のように、clickをしたときに画像のソースとタイトルを1つずつ変えるのではなく、まとめて変えたいです。
コードをどのようにかんぜんすればいいでしょうか？

[Lhankor_Mhy]

『まとめて変えたい』の意味を読み取れませんでした。
もう少し、具体的にお願いいたします。

Answer 2

modalContainerクラスのdivタグの中身を作る部分のコードを別関数に入れ、それをif文で呼び出したらできました