想用不同的计时器显示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>