Jquery 在循环中延迟更改样式

我试图在一个循环中改变一个div的颜色，在每次颜色改变之间有一点延迟，这样你就可以看到颜色，我不知道怎么做，也不知道要搜索什么，所以现在我在问，我刚刚调整了我认为我应该如何工作，这给了我一个很好的想法

$("#button").click(function(){
     $("#box").css("background-color", "red");
     delay(500);
     $("#box").css("background-color", "yellow");
     delay(500);
     $("#box").css("background-color", "green");
     delay(500);
     $("#box").css("background-color", "purple");
     loop();
});

使用：

 $("#button").click(function(){
  setTimeout(function() {
  $("#box").css("background-color", "red");
     setTimeout(function() {
         $("#box").css("background-color", "yellow");
            setTimeout(function() {
             $("#box").css("background-color", "green");
                setTimeout(function() {
                 $("#box").css("background-color", "purple");
                    $("#button").click();
  },500);},500);},500);},500);});

使用：

 $("#button").click(function(){
  setTimeout(function() {
  $("#box").css("background-color", "red");
     setTimeout(function() {
         $("#box").css("background-color", "yellow");
            setTimeout(function() {
             $("#box").css("background-color", "green");
                setTimeout(function() {
                 $("#box").css("background-color", "purple");
                    $("#button").click();
  },500);},500);},500);},500);});

---

您正在查找的

window.setInterval（）

---

请参见您正在查找的

window.setInterval（）

---

请参见

如果您想使用更多颜色（例如10种），该怎么办？这是重复的codewell OP会指定的。当颜色的数量更多时，没有人会喜欢上面的解决方案。这不是投票否决ok的理由。很可能一种解决方案不可能比另一种可行。但这是解决OPs问题的办法。@Joonas:谢谢你让我知道。如果你想用更多的颜色怎么办（例如10）？这是重复的codewell OP会指定的。当颜色的数量更多时，没有人会喜欢上面的解决方案。这不是投票否决ok的理由。很可能一种解决方案不可能比另一种可行。但这是解决老年退休金问题的办法。@Joonas:谢谢你让我知道。谢谢你，伙计，这正是我需要的。我想把它和一些滚动结合起来：）我也有类似的想法：（在这一次中，点击后的第一次颜色变化没有延迟，因为我觉得如果有，可能会很奇怪。）你需要在某个地方重置cnt btwThanks man，这正是我需要的。我想把它和一些滚动结合起来：）我也有类似的想法：（在这一次中，点击后的第一次颜色变化没有延迟，因为我觉得如果有，可能会很奇怪。）顺便说一句，你需要在某个地方重置cnt

$('#button').click(function() {
    var colors = ['red', 'yellow', 'green', 'purple', 'gray'],
    cnt = 0;

    var loop = setInterval(function() {
        if (cnt === colors.lenght) {
            clearInterval(loop);
        }

        $('#box').css('background-color', colors[cnt]);
        cnt++;
    }, 500)
});