Ajaxで外部javascriptを取得する度に、javascriptの動作を初期化する方法を知りたい。

Question

Ajaxで外部html+javascriptを取得する度に、javascriptでの動作をリセット（初期化）する方法を探しています。

index.htmlの<nav>の<a>リンクをクリックしたときに<main>部分を、Ajaxで取得するように実装しています。
<a>リンク先htmlは、home,about,works,contactで、index.htmlを最初に開いた時は、<main>部分はhome.htmlを取得した状態で開かれるようにしています。
そのhome.htmlにて、javascriptでテキストの一部が繰り返し、一定のリズムで切り替わるテキストエフェクトを実装したい(codepenをマネしました）のですが、以下問題に当たってしまいました。

発生している問題

Ajaxでhome.htmlを取得する度に、home.htmlのjavascriptの値が増えてしまい、実装したいテキストエフェクトのリズムが乱れ、テキストが重なってしまいます。
index.htmlでhome.htmlを再度取得した時も、初期ページと同じように、テキストエフェクトを一定のリズムで切り替わるようにjavascriptを動かすにはどのようにすればよいかご教示頂きたく、
わかりづらく申し訳ないですが、お力添え頂けると幸甚です。

該当のソースコード

 Index.html

   <nav id="type5">
     <ul>
       <li><a href="home/home.html">Home</a></li>
       <li><a href="about/about.html">About</a></li>
       <li><a href="works/works.html">works</a></li>
       <li><a href="contact/contact.html">Contact</a></li>
    </ul>
   </nav>
   <main>
      <div class="pageDisplay"></div>
   </main>
  <script src="js/index.js" type="text/x-javascript"></script>

index.js

$(function(){
	//ページを表示させる箇所の設定
	var $content = $('.pageDisplay');
	//ボタンをクリックした時の処理
	$(document).on('click', '#type5 a',function(event) {
		event.preventDefault();
		//.menu aのhrefにあるリンク先を保存
		var link = $(this).attr("href");
		//リンク先が今と同じであれば遷移しない
		if(link == lastpage){
			return false;
		}else{
			$content.fadeOut(600, function() {
				getPage(link);
			});
			//今のリンク先を保存
			lastpage = link;
		}
		
	});
	//初期設定
	getPage("home/home.html");
	var lastpage = "home/home.html";
	
	//ページを取得してくる
function getPage(elm){
    	$.ajax({
            type: 'GET',
            url: elm,
            dataType: 'html',	
            }).done(function (data) {
                $content.html(data).fadeIn(600);
           }).fail(function (data){
                       alert('問題がありました。');
    	});
    }
});

home.html, home.js

 <div class="rotating-text">
  <p>CSS Animation is</p>
  <p>
    <span class="word alizarin">awesome.</span>
    <span class="word wisteria">beautiful.</span>
    <span class="word peter-river">creative.</span>
    <span class="word emerald">fabulous.</span>
    <span class="word sun-flower">interesting.</span>
  </p>
</div>
	<script>
"use strict";
var words = document.querySelectorAll(".word");
words.forEach(function (word) {
  var letters = word.textContent.split("");
  word.textContent = "";
  letters.forEach(function (letter) {
    var span = document.createElement("span");
    span.textContent = letter;
    span.className = "letter";
    word.append(span);
  });
});
var currentWordIndex = 0;
var maxWordIndex = words.length - 1;
words[currentWordIndex].style.opacity = "1";
var rotateText = function () {
  var currentWord = words[currentWordIndex];
  var nextWord = currentWordIndex === maxWordIndex ? words[0] : words[currentWordIndex + 1];
  // rotate out letters of current word
  Array.from(currentWord.children).forEach(function (letter, i) {
    setTimeout(function () {
      letter.className = "letter out";
    }, i * 80);
  });
  // reveal and rotate in letters of next word
  nextWord.style.opacity = "1";
  Array.from(nextWord.children).forEach(function (letter, i) {
    letter.className = "letter behind";
    setTimeout(function () {
      letter.className = "letter in";
    }, 340 + i * 80);
  });
  currentWordIndex =
  currentWordIndex === maxWordIndex ? 0 : currentWordIndex + 1;
};
rotateText();
setInterval(rotateText, 4000);
	</script>

home.js　（home.htmlに直打ちしています)

"use strict";
var words = document.querySelectorAll(".word");
words.forEach(function (word) {
  var letters = word.textContent.split("");
  word.textContent = "";
  letters.forEach(function (letter) {
    var span = document.createElement("span");
    span.textContent = letter;
    span.className = "letter";
    word.append(span);
  });
});
var currentWordIndex = 0;
var maxWordIndex = words.length - 1;
words[currentWordIndex].style.opacity = "1";
var rotateText = function () {
  var currentWord = words[currentWordIndex];
  var nextWord = currentWordIndex === maxWordIndex ? words[0] : words[currentWordIndex + 1];
  // rotate out letters of current word
  Array.from(currentWord.children).forEach(function (letter, i) {
    setTimeout(function () {
      letter.className = "letter out";
    }, i * 80);
  });
  // reveal and rotate in letters of next word
  nextWord.style.opacity = "1";
  Array.from(nextWord.children).forEach(function (letter, i) {
    letter.className = "letter behind";
    setTimeout(function () {
      letter.className = "letter in";
    }, 340 + i * 80);
  });
  currentWordIndex =
  currentWordIndex === maxWordIndex ? 0 : currentWordIndex + 1;
};
rotateText();
setInterval(rotateText, 4000);

home.css

.rotating-text {
  font-family: Lato, sans-serif;
  font-weight: 600;
  font-size: 36px;
  color: black;
  transform: translateX(-80px);
}
.rotating-text p {
  display: inline-flex;
  margin: 0;
  vertical-align: top;
}
.rotating-text p .word {
  position: absolute;
  display: flex;
  opacity: 0;
}
.rotating-text p .word .letter {
  transform-origin: center center 25px;
}
.rotating-text p .word .letter.out {
  transform: rotateX(90deg);
  transition: 0.32s cubic-bezier(0.6, 0, 0.7, 0.2);
}
.rotating-text p .word .letter.in {
  transition: 0.38s ease;
}
.rotating-text p .word .letter.behind {
  transform: rotateX(-90deg);
}

.alizarin {
  color: #e74c3c;
}

.wisteria {
  color: #8e44ad;
}

.peter-river {
  color: #3498db;
}

.emerald {
  color: #2ecc71;
}

.sun-flower {
  color: #f1c40f;
}

about.html
<h1>about作成中</h1>

works.html
<h1>works作成中</h1>

contact.html
<h1>contact作成中</h1>

補足情報（FW/ツールのバージョンなど）

jQuery3.4.1

Answer 1

$content.html(data)とする直前で下記のいずれかを実行すれば良いと思います。

$content.html('')
もしくは
$content.empty()

Comments

[espil]

ありがとうございます！
試してみたところ、記述方法調べながらやってみたのですが、うまくわかっておらず、
超初心者で申し訳ありませんが、記述についても拝見させて頂けると幸いです。

[FrontEnd_Japan]

}).done(function (data) {
$content.html('') // $content.empty();
$content.html(data).fadeIn(600); // ここでdataを入れているのでその前で初期化をする。

[espil]

お力添えありがとうございます。試してみたんですが、初期化せず（この表現が合っているか）、home以外をクリックし、再度homeをクリックしてページを見てみる手動を繰り返すほど、やはりテキストエフェクトの挙動が、ズレてしまいます。
頂いた情報を元に再度模索します！