jQuery Flash Words

Question

Я пытаюсь взять предложение и пройти через мигание слов, а последнее слово исчезает в течение более длительного периода.

По какой-то причине он выполняет только последнюю строку в массиве.

Спасибо за ваше время:)

jsfiddle

<script>
    $(function() {

    //take sentence
      var lines = [
        'Apples are red',
        'Sky is blue',
        'Grass is green'
      ];
    //set index
    var i = 0;

    showLinesHelper();

    function showLinesHelper()  {
    //take line and split into words
      words = lines[i].split(' ');
      $.each(words, function(k, v)  {
    //take each word and flash
        if(k != words.length)  {
    //if not last word
          setTimeout(function()  {
    //display word into class
            $('.words').html(v);
    //take array index x milliseconds
          }, k * 500);
        }else  {
    //last word
          setTimeout(function()  {
    //display word into class
            $('.words').html(v);
    //take array index x milliseconds
    //show last word for a longer amount of time
          }, k * 1000);
        }
      });
      i++;
      if(i < lines.length)  {

    //if array is less than index, call again
        setTimeout(showLinesHelper(), 0);

      }
    }

    });
</script>

    <div class="words">
    </div>

Answer 1

Я внес некоторые изменения в ваш код, создал новую переменную time , чтобы сохранить новый счетчик времени ожидания, и добавил -1 к IF * 1006.* условие, потому что длина массива начинается с 0, а ELSE никогда не попадает в него.

$(function() {

//take sentence
  var lines = [
    'Apples are red',
    'Sky is blue',
    'Grass is green'
  ];
var i = 0;
var time = 1;
showLinesHelper();

function showLinesHelper()  {
//take line and split into words
  words = lines[i].split(' ');
  $.each(words, function(k, v)  {
//take each word and flash

    if(k != words.length - 1)  {
//if not last word

      setTimeout(function()  {
//display word into class
        $('.words').html(v);
//take array index x milliseconds
      }, time * 500);
      time = time + 2;
    }else  {
//last word

      setTimeout(function()  {
     
//display word into class
        $('.words').html(v);
//take array index x milliseconds
//show last word for a longer amount of time
      }, time * 500);
      time = time + 5;
    }
  });
  i++;
  if(i < lines.length)  {

//if array is less than index, call again
    setTimeout(showLinesHelper(), 0);

  }
}

});