如何在轮换完所有三条消息后停止setInterval定时器？

没问题，我来帮你解决这个问题！你的代码目前会无限循环轮换消息，因为每次到最后都会把atual重置为0，所以永远停不下来。我们只需要做两个关键修改就能实现轮换完所有消息后停止定时器：

核心思路 #

1. 保存setInterval的返回值（定时器ID），这样后续可以用clearInterval()来停止它
2. 调整判断逻辑，当所有消息都轮换完毕时，调用clearInterval()终止定时器

修改后的代码（方案一：最后一条消息fadeOut后停止） #

<script>
$(document).ready(function(){
  var textos = ["Hi", "Fine?", "0"];
  var atual = 0;
  var intervalId; // 存储定时器ID，用于后续停止定时器

  // 初始化显示第一条消息
  $('#display').text(textos[atual++]);

  // 启动定时器并保存ID
  intervalId = setInterval(function() {
    $('#display').fadeOut(function() {
      // 检查是否已经轮换完所有消息
      if (atual >= textos.length) {
        clearInterval(intervalId); // 停止定时器
        return; // 退出回调，不再执行后续的文本切换
      }
      $('#display').text(textos[atual++]).fadeIn();
    });
  }, 10);
});
</script>

方案二：最后一条消息保持显示（不fadeOut） #

如果你希望最后一条消息显示后保留在页面上，不会被淡出，可以调整逻辑，在最后一条消息完成淡入后再停止定时器：

<script>
$(document).ready(function(){
  var textos = ["Hi", "Fine?", "0"];
  var atual = 0;
  var intervalId;
  var displayedCount = 0; // 计数已显示的消息数量

  // 初始化显示第一条消息
  $('#display').text(textos[atual++]);
  displayedCount++;

  // 如果只有一条消息，直接跳过定时器
  if (displayedCount === textos.length) return;

  intervalId = setInterval(function() {
    $('#display').fadeOut(function() {
      $('#display').text(textos[atual++]).fadeIn(function() {
        displayedCount++;
        // 所有消息都显示完毕时停止定时器
        if (displayedCount === textos.length) {
          clearInterval(intervalId);
        }
      });
    });
  }, 10);
});
</script>

关键说明 #

• setInterval()会返回一个唯一的定时器ID，我们必须保存这个ID才能用clearInterval()正确停止定时器
• 方案一在最后一条消息淡出后停止，页面会变成空白；方案二则会让最后一条消息一直显示，根据你的需求选择即可

备注：内容来源于stack exchange，提问作者Nil