Javascript循环/交换导致一个元素无意地重复

Question

我创建了一个循环，将一个元素交换为下一个。除了在每个循环序列（5秒）之后，标记为“ 1”的元素在我只希望显示“ 5”时无意间将每个数字一直交换到5，似乎一切正常。我想以延迟瀑布效果显示循环，因此需要setTimout函数。

如何调整代码以显示元素的平滑交换？

让我们假设无法修改HTML。

$(document).ready(function() {
  setInterval(function() {
    for (let i = 1; i <= 5; i++) {
      setTimeout(function() {
        var nuFibClass = ".nu-fib-item-".concat(i);
        var nuFibClassNext = ".nu-fib-item-".concat(i + 1);
        swap(nuFibClass, nuFibClassNext);
      }, i * 500);
    }
  }, 5000);

  function swap(a, b) {
    a = $(a);
    b = $(b);
    var tmp = $("<span>").hide();
    a.before(tmp);
    b.before(a);
    tmp.replaceWith(b);
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nu-fib-item-1">1</div>
<div class="nu-fib-item-2">2</div>
<div class="nu-fib-item-3">3</div>
<div class="nu-fib-item-4">4</div>
<div class="nu-fib-item-5">5</div>

Codepen