循环期间如何设置setTimeout？

Question

我正在尝试每n秒更改一个句子中的最后一个单词。我想在特定范围内淡出该词，然后替换该词，最后淡入新词。

我在兼并Javascript方面遇到麻烦。无论我如何尝试，每个单词之后我都无法使循环暂停执行。

我最近的尝试是这样的：

  var shuffleSentences;

  $(function() {
    return shuffleSentences();
  });

  shuffleSentences = function() {
    var div, index, sentence, sentences;
    div = $(".sentences");
    sentences = div.data("sentences").split(";");
    sentence = div.html();
    index = sentences.indexOf(sentence);
    sentences.splice(index, 1);
    return $.each(sentences, function(i, sentence) {
      return setTimeout((function() {
        return div.fadeTo(500, 0.0, function() {
          div.html(sentence);
          return div.fadeTo(1000, 1.0, function() {
            if (sentences.length === i + 1) {
              console.log("Restart: " + i);
              return shuffleSentences();
            } else {
              return console.log("Don't restart: " + i);
            }
          });
        });
      }), 4000);
    });
  };

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>We're at number <span class="sentences" data-sentences="one;two;three;four">two</span></p>

您看到单词替换确实发生了，但是在控制台中看似乎我做错了。

非常欢迎提出建议！