хочу показать div с другим таймером

Question

Я хочу показать div с другим классом с разным временем.например, мой div должен показывать, что для 2000 мс класс будет «один», тогда как div должен показывать для 4000 мс, класс будет «два», тогда div должен показывать, что для 3000 мс класс будет «три».Я использую массив для добавления класса с таймером.но массив сокращается от более низкого значения к более высокому значению.я не хочу этогоПожалуйста, помогите мне в этой проблеме.

HTML-код

var text = ['one', 'two', 'three', 'four'];
var timeleft =['5000','2000','4000','3000'];
            
$.each (timeleft, function(i, timeleft){
                
    setTimeout ( function(){
        $('#change').addClass(text[i]);
        $('#change').text(text[i]);
        console.log(text[i]);
                    
    }, timeleft);
})
            

.one {
    background-color: red;
    font-size: 100px;
    text-align: center;
}
.two {
    background-color: yellow;
    font-size: 100px;
    text-align: center;
}
.three {
    background-color: green;
    color: white;
    font-size: 100px;
    text-align: center;
}
.four {
    background-color: rebeccapurple;
    color: white;
    font-size: 100px;
    text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="" id="change"> change</div>

Answer 1

Вы можете использовать queue и delay для этого:

var text = ['one', 'two', 'three', 'four'];
var timeleft = ['5000', '2000', '4000', '3000'];

$.each(timeleft, function(i, timeleft) {
  $('#change')
    .queue(function() {
      $(this)
        .text(text[i])
        .addClass(text[i])
        .dequeue();
    })
    .delay(timeleft);
});

.one {
  background-color: red;
  font-size: 100px;
  text-align: center;
}

.two {
  background-color: yellow;
  font-size: 100px;
  text-align: center;
}

.three {
  background-color: green;
  color: white;
  font-size: 100px;
  text-align: center;
}

.four {
  background-color: rebeccapurple;
  color: white;
  font-size: 100px;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="" id="change">change</div>