快速更改 css 属性值？答案

【问题标题】：Quickly change css attributes values?快速更改 css 属性值？
【发布时间】：2016-11-26 14:50:17
【问题描述】：

我有示例代码：

<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”按钮时，用户将能够看到背景非常快速地从红色、蓝色、黄色、绿色到黑色。但是当点击 Go 按钮时，我得到的只是黑色。我错过了什么吗？

【问题讨论】：

标签： javascript jquery css

【解决方案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);
  }
});

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

每次点击事件时，for 以黑色结束。所以变黑了！！！如果您将其与浏览器渲染进行比较，则 for 是快速的，因此其他颜色不会被渲染。尝试 setTimeout() 函数，为每种颜色设置不同的偏移量

【讨论】：

【解决方案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>

【讨论】：