Я думаю, что эту проблему будет действительно трудно решить ...
Я создал спидометр, который показывает количество землетрясений, произошедших в моем городе.
Я хочу оживить этот спидометр двумя способами:
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 или без него?
Надеюсь, вы мне поможете и извините за мой английский.