在jQuery中，有一个函数each，它允许在选择器所有元素上循环
要在两次颜色更改之间“等待”，可以将css更改嵌入到each循环索引的setTimeout链接中

$(".letters span").each(function(index, elem) {
  setTimeout(function() {
    $(elem).css('color', 'red');
  }, index * 500);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="letters">
  <span>H</span>
  <span>E</span>
  <span>L</span>
  <span>L</span>
  <span>O</span>
  <span>, </span>
  <span>W</span>
  <span>O</span>
  <span>R</span>
  <span>L</span>
  <span>D</span>
</div>

您的思路是正确的，但是您需要将color的更改延迟一段时间（比如100ms），以便可以看到效果。为了有一个延迟，使用方法setTimeout，它接受2参数：
1.一个回调函数，当所需的延迟已经过去时调用。
1.所需延迟（例如100ms）。
当选择延迟时，比如100ms，我们应该将其乘以当前字母的索引（准确地说是当前span），以便可以看到效果。
下面是一个Live Demo：

/**
 * loop through the "span" elements.
 * delay a 100ms * i (current span index) that will later change the color for the span at index "i".
 * you may change the delay (100 in this case) by any value you want.
 */
$('span').each((i, el) => setTimeout(() => $(el).css('color', 'red'), i * 100))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>H</span>
<span>E</span>
<span>L</span>
<span>L</span>
<span>O</span>
<span>, </span>
<span>W</span>
<span>O</span>
<span>R</span>
<span>L</span>
<span>D</span>

jQuery.each方法用于循环遍历选定的span元素

let string = document.querySelector(".str");

const coloredWriter = (str, appendTo, speed) => {
  const body = document.querySelector(`${appendTo}`);
  const stringText = str.innerText;
  str.remove();
  const splitedText = stringText.split("");

  splitedText.forEach((element) => {
    let span = document.createElement("span");
    span.style.fontSize = '30px'
    span.innerText = element;
    span.classList.add("color");

    body.append(span);

    const allSpans = document.querySelectorAll(".color");
    let i = 0;
    let timeOut = () => {
      let randomColor = Math.floor(Math.random() * 16777215).toString(16);
      if (allSpans[i]) {
        setTimeout(() => {
          allSpans[i].style.color = `#${randomColor}`;
          i++;
          timeOut();
        }, speed);
      }
    };
    timeOut();
  });
};

coloredWriter(string, "body", 500);

.str{
  fontsize:35px
}

<span class="str">hello world</span>

你必须使用eq()函数，因为你不能在dom元素上使用jquery函数，使用eq你返回一个jquery元素。

$("span").ready(function() {
  var letters = $("span").length;
  for (let i = 0; i <= letters; i++) {
    setTimeout(() => {
      $("span").eq(i).css("color", "red")
    }, i * 1000);
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>H</span>
<span>E</span>
<span>L</span>
<span>L</span>
<span>O</span>
<span>, </span>
<span>W</span>
<span>O</span>
<span>R</span>
<span>L</span>
<span>D</span>

但更好的解决方案是使用jquery的each。

$("span").each((index, el) => {
  setTimeout(() => {
    $(el).css("color", "red")
  }, index * 1000);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>H</span>
<span>E</span>
<span>L</span>
<span>L</span>
<span>O</span>
<span>, </span>
<span>W</span>
<span>O</span>
<span>R</span>
<span>L</span>
<span>D</span>