jQuery实现循环逐个显示列表项功能不生效，如何修复？

• setInterval传入的第一个参数是立即执行函数(function x(){...})()的返回值，该函数无return值，实际传给setInterval的是undefined，导致逻辑只会在页面加载完成后执行1次，无法循环触发。
• 轮询间隔设置不合理，6个列表项逐个显示的总动画时长远超过设置的5000ms，会出现上一轮动画还未执行完毕，下一轮逻辑就触发的时序混乱问题。
• 每轮动画开始时没有统一隐藏所有已显示的列表项、清空之前的动画队列，遍历中逐个隐藏的逻辑容易出现展示重叠、闪烁、动画累积的问题。

JavaScript 代码 #

jQuery(document).ready(function($){
  // 定义单次轮播的动画逻辑
  function showItems() {
    // 每轮开始先统一隐藏所有列表项，清空之前残留的动画队列
    const $items = $('ul.banner-point > li');
    $items.hide().clearQueue();
    let delay = 1000;
    $items.each(function() {
      $(this).delay(delay).fadeIn(1850).addClass('text-bigger').delay(100).queue(function(next) {
        $(this).removeClass('text-bigger');
        next();
      });
      delay += 1000;
    });
  }
  // 页面加载完成后先执行第一次动画
  showItems();
  // 间隔时间按实际总动画时长设置：当前6个列表项总动画时长约9.2秒，设置10秒间隔保证上一轮完全跑完再开始下一轮，可按需调整
  setInterval(showItems, 10000);
});

CSS 代码（原有代码无需修改） #

.text-bigger {
    font-size: 18px;
    color: #ed3b49;
}

ul.banner-point li {
    display: none;
}

HTML 代码（原有代码无需修改） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="banner-point">
    <li style="font-weight: 400;"><span>Point 1</span></li>
    <li style="font-weight: 400;"><span>Point 2</span></li>
    <li style="font-weight: 400;"><span>Point 3</span></li>
    <li style="font-weight: 400;"><span>Point 4</span></li>
    <li style="font-weight: 400;"><span>Point 5</span></li>
    <li style="font-weight: 400;" ><span>Point 6</span></li>
</ul>

内容的提问来源于stack exchange，提问作者iceiceicy