循环中带有jquery的延迟函数（颜色变化）[重复]答案

【问题标题】：Delayed function (colorchange) with jquery in a loop [duplicate]循环中带有jquery的延迟函数（颜色变化）[重复]
【发布时间】：2018-07-09 20:04:42
【问题描述】：

你好，互联网的人们。

我是 stackoverflow 和 javascript/jquery 的新手，目前正在尝试学习它。

我现在的问题是：

我想要一个默认为黑色并每秒将其颜色更改为蓝色的盒子。然后它应该保持蓝色大约 0.2 秒，然后恢复到默认颜色（黑色）。这整个动作应该在一个循环中一遍又一遍地重复。我读过一些关于 setInterval 和 delay 的内容，但我不确定这是否能以任何方式帮助我解决问题。

到目前为止我的代码是这样的：

var box = $("#box");

function changecolor(){
box.css("background-color", "blue")
}
setTimeout(changecolor, 1000);

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#box{
  
background: #000;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  margin: 0 auto;
  width: 200px;
  height: 200px;
  cursor: pointer;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
</div>

【问题讨论】：

可以选择 CSS 吗？或者，这是某种 JS 挑战？
某种 JS 挑战。

标签： javascript jquery colors settimeout delay

【解决方案1】：

在函数中，您可以测试颜色，然后调用递归调用相同函数的超时：

var box = $("#box");

function changecolor() {
  if (box.css("background-color") === "rgb(0, 0, 0)") {
    box.css("background-color", "blue")
    setTimeout(changecolor, 200)
  } else {
    box.css("background-color", "black")
    setTimeout(changecolor, 1000);
  }
}
changecolor()

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#box {
  background: #000;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  margin: 0 auto;
  width: 200px;
  height: 200px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
</div>

【讨论】：

抱歉，马克，我不是故意要编辑你的帖子。

【解决方案2】：

其中的挑战是您需要以不同的延迟交换颜色。

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

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

这是一个例子：

var box = $("#box");

function colorChanger (delay) {
    // If delay is 1sec, set color to black.
    // Otherwise, we set color to blue.
    var color = delay === 1000 ? "black" : "blue";

    // Apply color to element
    box.css("background-color", color);

    // The color set above will be changed when this
    // timer is called (either 1 sec for black
    // or .2 sec for blue. Within the timer, we will
    // flip the delay (if 1sec, next iteration will be 
    // 0.2 secs)
    setTimeout(function () {
        // Flip for next loop
        colorChanger(delay === 1000 ? 200 : 1000);
    }, delay);
}
// Kick off color changer
colorChanger(200);

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#box {
  background: #000;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  margin: 0 auto;
  width: 200px;
  height: 200px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
    </div>

【讨论】：

【解决方案3】：

只需使用 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，我们将其更新为蓝色，否则为黑色。

【讨论】：