изменение текста с разной продолжительностью в javascript

Question

Привет, сообщество stackoverflow,

моя цель - создать изменяющийся текст с разной продолжительностью, что означает, что есть определенные «маркеры» или предложения, которые остаются дольше, чем 2 секунды, которые у меня есть на данный момент. Кроме того, я бы хотел, чтобы анимация остановилась после отображения всех записей списка.

Вот код, который у меня есть на данный момент:

http://jsfiddle.net/eu8L01nv/

Javacript:

    var terms = $("ul li");

    function rotateTerm() {

     var ct = $("#rotate").data("term") || 0;

     console.log(terms.eq([ct]).text());

      $("#rotate").data("term", 
        ct == terms.length -1 ? 0 : ct + 1).text(terms.eq([ct]).text())
      .fadeIn().delay(2000).fadeOut(200, rotateTerm);

    }
    $(rotateTerm);

HTML

    <p><span id="rotate">default</span></p>

    <ul style="display:none">
        <li>This is sentence number one.</li>
        <li>That is sentence number two.</li>
        <li>This is another sentence.</li>
        <li>Another sentence.</li>
    </ul>

Спасибо!

Answer 1

Надеюсь, это решит проблему:

Я добавил к нему этот фрагмент кода: ct < terms.length -1 && rotateTerm. так что он не будет вызывать функцию rotateTerm после последнего элемента

И я добавил массив timeDelay var timeDelay = [1000, 2000, 4000, 8000], чтобы включить разные задержки для разных предложений.

var terms = $("ul li");

    function rotateTerm() {

     var timeDelay = [1000, 2000, 4000, 8000];
     var ct = $("#rotate").data("term") || 0;
     console.log(terms.eq([ct]).text());
     console.log(ct)
      $("#rotate").data("term", 
        ct == terms.length -1 ? 0 : ct + 1).text(terms.eq([ct]).text())
      .fadeIn().delay(timeDelay[ct]).fadeOut(200, ct < terms.length -1 && rotateTerm);

    }
    $(rotateTerm);

Или вы можете установить задержку в зависимости от длины текста

var terms = $("ul li");

function rotateTerm() {

  var ct = $("#rotate").data("term") || 0;
  const text = terms.eq([ct]).text()
  const textLength = text.length;
  console.log(textLength)
  const timeDelay = textLength < 50 ? 2000 : textLength * 50
  $("#rotate").data("term",
      ct == terms.length - 1 ? 0 : ct + 1).text(text)
    .fadeIn().delay(timeDelay).fadeOut(200, ct < terms.length - 1 && rotateTerm);

}
$(rotateTerm);