javascript - setTimeout() 不适用于更改间隔

Question

我有一个类 test，其 background-color 我想更快地在 lime 和 green 之间切换更快。

为此，我使用了 for 循环变量并将其传递给包含 setTimeout() 的函数，但它不起作用。

(这不是一个重复的问题。所说的“原始”是关于一个简单的 setTimeout() 而这个问题是关于一个 setTimeout() for 循环。我知道该问题的答案可能会间接回答我的问题，但问题本身并不相同)

$(document).ready(function() {

  for (var i = 0; i < 20; i++) {
    delay(i);
    $(".test").css('background-color', 'lime');
  }

});

function delay(i) {
  setTimeout(function() {
    $(".test").css('background-color', 'green');
  }, 1000 - 50 * i);
}

.test {
  width: 300px;
  height: 300px
}

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

Answer 1

试试这个方法:

for(var i=0;i<20;i++)
{
  delay(i);
}

function delay(i) {
  setTimeout(function() {
      if (i%2 == 0) {
        $(".test").css('background-color', 'green');      
      } else {
        $(".test").css('background-color', 'lime');
      }

  }, 1000 - 50 * i);
}