Vanila JS实现四个计数器同步结束功能的问题咨询

我使用原生JS开发计数器效果，期望实现四个计数器联动完成计数的功能，具体规则如下：

• 计数器four需保持数值为0，直到计数器three的数值达到14后，才切换为1
• 计数器one的递增逻辑需跟随计数器two和计数器three的进度

当前实现代码 #

HTML #

<section class="counters">
  <div class="container-max-width">
    <div class="container-inner-width">
      <div>
        <div class="counter counter-one" data-target="4">0</div>
        <span>counter one</span>
      </div>
      <div>
        <div class="counter counter-two" data-target="10">0</div>
        <span>counter two</span>
      </div>
      <div>
        <div class="counter counter-three" data-target="15">0</div>
        <span>counter three</span>
      </div>
      <div>
        <div class="counter counter-four" data-target="1">0</div>
        <span>counter four</span>
      </div>

    </div>

  </div>
</section>

CSS #

.counters {
  margin-top: 2em;
}

.counters .container-max-width {
  display: flex;
  position: relative;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: stretch;
  background-color: #fff;
  font-size: 1rem;
  text-transform: uppercase;
}

.counters .container-max-width .counter {
  font-size: 3.25em;
}

.counters .container-max-width span {
  color: #848484;
  padding: 0;
}

.counters .container-inner-width {
  display: grid;
  grid-gap: 200px;
  grid-template-columns: repeat(4, 1fr);
  padding: 85px 0 85px 0;
  text-align: center;
}

JavaScript #

const counter = document.querySelectorAll('.counter');
const speed = 200;

counter.forEach(counter => {
  const updateCount = () => {
    const target = +counter.getAttribute('data-target');
    const count = +counter.innerText;

    const increment = target / speed;

    if (count < target) {
      counter.innerText = Math.ceil(count + increment);
      setTimeout(updateCount, 80);
    } else {
      count.innerText = target;
    }


  }

  updateCount();
});

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