Question

我有示例代码：

<div></div>
<button>
Go
</button>

div {
  width: 50px;
  height: 50px;
  border: 1px solid #ccc;
}

var bgs = ['red', 'blue', 'yellow', 'green', 'black'];
$('button').click(function() {
    for (var i = 0; i < bgs.length; i++) {
    $('div').css('background-color', bgs[i]);
  }
});

https://jsfiddle.net/e4jhwtyc/2/

我想要实现的是，当用户点击“开始”按钮时，用户将能够非常快速地看到背景，从红色，蓝色，黄色，绿色，然后是黑色。但是当点击Go按钮时，我得到的只是黑色。我错过了什么吗？

Answer 1

您需要设置一些超时以查看颜色的变化，否则会发生太快。

var bgs = ['red', 'blue', 'yellow', 'green', 'black'];
$('button').click(function() {
    for (var i = 0; i < bgs.length; i++) {
    setTimeout(function(){
      $('div').css('background-color','').css('background-color', bgs[i]);
    }, 1000);
  }
});

Answer 2

你可以使用setInterval()在一段时间内改变颜色（例如0.3秒），否则它会立即改变你的代码。当它到达数组的最后一个元素时，您可以clearInterval()并重置计数器i

var bgs = ['red', 'blue', 'yellow', 'green', 'black'];

var i = 0;
$('button').click(function() {
  var x = setInterval(function() {
    if (i < bgs.length) {
      $('div').css('background-color', bgs[i++]);
    } else {
      clearInterval(x);
      i = 0;
    }
  }, 300)
});

div {
  width: 50px;
  height: 50px;
  border: 1px solid #ccc;
}

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

Answer 3

每次有点击事件时，for都会以黑色结束。它变得黑了!!!如果你将它与浏览器渲染进行比较，则表示快速，因此其他颜色不会被渲染。尝试使用setTimeout（）函数为每种颜色添加不同的偏移量

Answer 4

此版本不处理“setTimeout”和“setInterval”

var bgs = ['red', 'blue', 'yellow', 'green', 'black'];
function *getBgs(){
  for(let v of bgs) {
    yield v;
  }
}

$('button').click(function() {
  let iter = getBgs();
  let $div = $('div');
  var delay = 150;
  var prev = 0;
  (function nextColor(){
    requestAnimationFrame(function(t){
      if(prev && t - prev < delay) {
        return nextColor();
      }
      prev = t;
      let next = iter.next();
      if(next.done) return;
      $div.css('background-color', next.value);
      nextColor();
    });
  })();
  
});

div {
  width: 50px;
  height: 50px;
  border: 1px solid #ccc;
}

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

快速更改css属性值？

4 个答案: