停止逐行javascript动画循环

我目前正在使用一段javascript，它会在一段文本中逐行消失

Javascript不是由forte开发的，我正在努力阻止动画循环

任何关于如何实现这一目标的帮助和建议都将非常有用。 这里有一个小提琴的链接

谢谢

Javascript

$(document).ready(function() {


function fadeInLine(line){
  $('<span />', {
    html: line.trim(),
    style: "opacity: 0"
  })
  .appendTo($greeting)
  .animate({opacity:1}, 500);
}

function rotateLines(interval){
  setTimeout(() => {
    if(i >= lines.length-1){
      i = 0;
      interval = 1500;
      setTimeout(()=>{ $greeting.empty(); }, interval)
    } else {
      fadeInLine(lines[i]);
      i++;
      interval = 1500;
    }
    rotateLines(interval);
  }, interval);
}

const $greeting = $('div#container p');
const text = $greeting.html();
const lines = text.split("\n").filter((e) => e.replace(/\s+/, ""));
let i = 0;

$greeting.empty();
rotateLines();



});

$（文档）.ready（函数（）{
功能fadeInLine（行）{
$('', {
html:line.trim（），
样式：“不透明度：0”
})
.appendTo（$问候语）
.animate（{opacity:1}，500）；
}
函数旋转线（间隔）{
设置超时（（）=>{
如果（i>=行。长度-1）{
i=0；
间隔=1500；
setTimeout（（）=>{$greeting.empty（）；}，间隔）
}否则{
fadeInLine（第[i]行）；
i++；
间隔=1500；
}
旋转线（间隔）；
}，间隔）；
}
const$greeting=$（'div#container p'）；
const text=$greeting.html（）；
常量行=text.split（“\n”）.filter（（e）=>e.replace（/\s+/，”）；
设i=0；
$greeting.empty（）；
旋转线（）；
});

Html

伦敦还有另一面。

超出城市管辖范围。

未被外人发现。

受到业内人士的喜爱。

千变万化的地方……

取笑我们野性的一面，刺激我们艺术的一面。

将工作区模糊到游戏区。

我们住在光明面。

探索我们的黑暗面。

隐藏在显而易见的地方，这是河岸。

伦敦的另一边。

.

将预定呼叫放入

else

子句中，并删除

问候语.empty（）

行

function rotateLines(interval){
  setTimeout(() => {
    if(i >= lines.length-1){
      i = 0;
      interval = 1500;
      // setTimeout(()=>{ $greeting.empty(); }, interval)
    } else {
      fadeInLine(lines[i]);
      i++;
      interval = 1500;
      rotateLines(interval);
    }
    // rotateLines(interval); 
  }, interval);
}

---

动画在整个文本淡入后停止。

只需删除重置元素和计数器的if子句即可

function rotateLines(interval){
  setTimeout(() => {
      fadeInLine(lines[i]);
      i++;
      interval = 1500;

    rotateLines(interval);
  }, interval);
}

---

当

i

超出

行的边界时会发生什么？我在控制台的setTimeout（（索引）：44）

中得到了

uncaughttypeerror:无法读取fadeInLine（（索引）：35）处未定义的属性“trim”。YMMV.你说得对@meowgoes我甚至没有考虑到我没有使用for循环。
function rotateLines(interval){
  setTimeout(() => {
      fadeInLine(lines[i]);
      i++;
      interval = 1500;

    rotateLines(interval);
  }, interval);
}