如何使用按钮逐个截断/收缩跨度，而不是一次全部截断？

<div class="container">
  <span class="span">跨度1</span>
  <span class="span">跨度2</span>
  <span class="span">跨度3</span>
  <span class="span">跨度4</span>
</div>
<button id="btn">截断/收缩</button>

.container {
  width: 400px;
  border: 1px solid #ccc;
  padding: 10px;
}

.span {
  display: block;
  margin-bottom: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.expand {
  white-space: normal;
  overflow: visible;
  text-overflow: inherit;
}

document.getElementById("btn").addEventListener("click", function() {
  var spans = document.getElementsByClassName("span");
  var delay = 500; // 每个跨度之间的延时时间，单位为毫秒

  for (var i = 0; i < spans.length; i++) {
    (function(index) {
      setTimeout(function() {
        spans[index].classList.toggle("expand");
      }, index * delay);
    })(i);
  }
});