аю, что это будет действительно трудно решить проблему ...

Я создал спидометр, который показывает количество землетрясений, произошедших в моем городе. Я хочу оживить этот спидометр двумя способами:background-color (зеленый, когда нет землетрясений и красный, когда есть3000 землетрясения) и ширину этого цветного div (div, где я анимирую background-color). Так что ширина будет0 когда нет землетрясений и будет 100%, когда есть 3000 землетрясений.

Анимация составляет 2 секунды, например, если у меня есть1500 землетрясения: добавить класс для анимации спидометра

  $('#first').addClass('first-start');

И используяsetTimeout я добавляю класс, чтобы остановить анимацию через 1 секунду

 setTimeout(function() {
   $('#first').addClass('first-pause');
 }, 1000);

Этот код почти всегда отлично работает.

Теперь я добавляю фрагмент:

$('#first').addClass('first-start');

setTimeout(function() {
  $('#first').addClass('first-pause');
}, 1000);

#page {
  margin-top: 50px;
  width: 300px;
  height: 300px;
  background-color: #000;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 4;
  overflow: hidden;
}

#box-first{
  width: 200px;
  height: 100px;
  background-color: #fff;
  border-radius: 200px 200px 0 0;
  margin-top: 10px;
  margin-bottom: 10px;
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  z-index: 3;
  overflow: hidden;
}

#first{
  border-radius: 200px 200px 0 0;
  margin: 0;
  background: red;
  width: 200px;
  height: 100px;
  transform: rotate(180deg);
  transform-origin: 50% 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  border: 0;
  z-index: 1;
}

#n1{
  font-size: 20px;
  color: #fff;
  font-weight: bold;
  position: absolute;
  left: 50px;
  right: 0;
  text-align: center;
  top: 50px;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100px;
  height: 50px;
  background: #000;
  border-radius: 100px 100px 0 0;
  z-Index: 1;
  overflow: hidden;
}

@keyframes first {
  0% {
    background-color: green;
    transform: rotate(180deg);
  }
  33% {
    background-color: yellow;
    transform: rotate(240deg);
  }
  66% {
    background-color: orange;
    transform: rotate(300deg);
  }
  100% {
    background-color: red;
    transform: rotate(360deg);
  }
}



.first-start {
  animation: first 2s linear;
}

.first-pause {
  animation-play-state: paused;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">
  <div id="box-first">
    <div id="first">

    </div>
    <div id="n1">
      1500
    </div>
  </div> 
</div>

https://jsfiddle.net/hoymds97/

Проблема в том, что я использую этот код в большом файле (4000 строк) с большим количеством событий и в той же функции есть 8 спидометров. Я заметил это иногда (когда есть больше событий)setTimeout не начинать сразу после добавления класса для анимации спидометра.

В результате анимация остановится через ... В нашем случае, например, она блокируется через 1700 миллисекунд, а не 1000 секунд. Иногда это останавливается даже через 2 секунды.

Я думаю, что проблема заключается во многих событиях вqueue.

Так как я могу решить эту проблему?

Можно решить, используя всегдаsetTimeout или без этого?

Я надеюсь, что вы можете помочь мне и извините за мой английский.