Javascript 循环中带有jquery的延迟函数（colorchange）

大家好，这里是互联网上的人们

我不熟悉stackoverflow和javascript/jquery，目前正在尝试学习它

我现在的问题是：

我想有一个默认为黑色的框，并且每秒钟将其颜色更改为蓝色。然后，它应该保持蓝色约0.2秒，并恢复到默认颜色（黑色）。整个动作应该在一个循环中一遍又一遍地重复。我读了一些关于setInterval和delay的文章，但我不确定这是否对我的问题有帮助

到目前为止，我的代码是：

var-box=$（“#box”）；
函数changecolor（）{
css（“背景色”、“蓝色”）
}
设置超时（changecolor，1000）
正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#盒子{
背景：#000；
边界半径：4px；
填充：20px；
字体大小：25px；
文本对齐：居中；
保证金：0自动；
宽度：200px；
高度：200px；
光标：指针；
}
在函数中，您可以测试颜色，然后调用超时，该超时递归调用相同的函数：


var-box=$（“#box”）；
函数changecolor（）{
if（box.css（“背景色”）=“rgb（0,0,0）”）{
css（“背景色”、“蓝色”）
设置超时（changecolor，200）
}否则{
css（“背景色”、“黑色”）
设置超时（changecolor，1000）；
}
}
changecolor（）
正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#盒子{
背景：#000；
边界半径：4px；
填充：20px；
字体大小：25px；
文本对齐：居中；
保证金：0自动；
宽度：200px；
高度：200px；
光标：指针；
}
只需使用setInterval方法并执行以下操作：

var box = $("#box");

var count = 0;
function changecolor() {
if (count == 0) {
  box.css("background-color", "blue");
  count = 1;
}
  else {
    box.css("background-color", "black")
    count = 0;
  }

}
setInterval(changecolor, 200);

setInterval（）
每200毫秒运行一次函数
changecolor（）
。我们使用一个变量来跟踪要更新的颜色。如果是0，我们将其更新为蓝色或黑色。
这方面的挑战是，您需要在不同的延迟时间交换颜色

使用
setInterval w/setTimeout
将意味着您在蓝色->黑色之间的转换缩短约200ms（而不是整个1000ms），因为setInterval将是颜色之间的固定时间。基本上，你在1000毫秒内交换颜色

一种解决方案是连续调用
setTimeout
，并传递不同的延迟值

下面是一个例子：


var-box=$（“#box”）；
功能颜色变换器（延迟）{
//如果延迟为1秒，则将颜色设置为黑色。
//否则，我们将颜色设置为蓝色。
var color=delay==1000？“黑色”：“蓝色”；
//对元素应用颜色
css（“背景色”，颜色）；
//此操作时，将更改上面设置的颜色
//调用计时器（黑色为1秒或1秒
//蓝色是0.2秒。在计时器内，我们将
//翻转延迟（如果为1秒，则下一次迭代将为
//0.2秒）
setTimeout（函数（）{
//翻下一圈
颜色变换器（延迟===1000？200:1000）；
}，延误）；
}
//启动颜色变换器
颜色变换器（200）；
正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#盒子{
背景：#000；
边界半径：4px；
填充：20px；
字体大小：25px；
文本对齐：居中；
保证金：0自动；
宽度：200px；
高度：200px；
光标：指针；
}

CSS是一种选择吗？或者，这是某种JS挑战吗？某种JS挑战。对不起，马克，我不是有意编辑你的帖子的。