Я пытаюсь написать jQuery / JavaScript код, который исчезает в списке слов на веб-странице

Question

Я пытаюсь написать некоторый код JavaScript / jQuery, который позволит элементу <h1> на веб-странице циклически перемещаться по списку слов. Слова будут появляться и исчезать. Я не могу заставить его работать. Я думаю, что оператор while выполняется слишком быстро и не останавливается. Может кто-нибудь, пожалуйста, помогите; Я потратил час, пытаясь это исправить.

var x = 5;
var calls = 10;
var words = ["cat", "dog", "fish"];

while (calls > 0) {
  setInterval(myfunc, 2000);
  calls = calls - 1;
}

function myfunc() {
  if (x > 2) {
    x = 0;
  }
  $("h1").fadeToggle(5000).html(words[x]);

  x = x + 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="myText"></h1>

Answer 1

Я бы сделал это по-другому, например, используя for l oop и await с анимациями:

const words = ["cat", "dog", "fish"],
	  $text = $("h1.myText");

const run = async () => {
	for( let word of words ){
		console.log("word = " + word)
		$text.hide().text(word);
		await $text.fadeIn(2000).promise()
		await $text.fadeOut(2000).promise()
	}
}

run()

h1 {
  font-size : 3rem;
  color : green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="myText"></h1>

Answer 2

setInterval продолжает работать каждые x секунд, пока не будет очищен. Одним из способов достижения вашей цели является использование метода setTimeout (), который выполняется только раз в x секунд, или удаление блока while и остановка интервала после ряда вызовов из вашей функции, например:

var x = 5;
var calls = 10;
var words = ["cat", "dog", "fish"];

var interval = setInterval(myfunc, 2000);

function myfunc() {
  if (x > 2) {
    x = 0;
  }
  $("h1").hide();
  $("h1").html(words[x]).fadeToggle(2000);
  x = x + 1;
  calls = calls - 1;
  if (calls < 0){
    clearInterval(interval);
  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1></h1>