Question

我正在处理以下代码。为什么interval只发生一次，而不是let x= 3那样发生3次？

基本上，我需要重复此循环/间隔3次，但只发生一次。

$(function() {
  let colors = ['red', 'blue', 'green']

  let x = 3;
  let interval = 6000;

  for (let i = 0; i < x; i++) {
    setTimeout(function() {
      $('body').css('background-color', colors[i]);
      backtoWhite();

    }, i * interval)
  }

  function backtoWhite() {
    setTimeout(function() {
      $('body').css('background-color', 'white');
    }, 3000);
  }
});

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

Answer 1

您可以使用setInterval连续执行功能，而setTimeout可以在指定的延迟（以毫秒为单位）后执行一次功能。

setInterval的文档指出：

WindowOrWorkerGlobalScope mixin的setInterval（）方法重复调用一个函数或执行一个代码段，每次调用之间有固定的时间延迟。它返回一个唯一标识该间隔的间隔ID，因此您以后可以通过调用clearInterval（）将其删除。

setTimeout的文档指出：

WindowOrWorkerGlobalScope mixin的setTimeout（）方法（以及window.setTimeout的后继方法）设置一个计时器，该计时器在计时器到期后执行一次功能或指定的代码。

$(function() {
  let colors = ['red', 'blue', 'green']

  let x = 0;
  let interval = 6000;
  
  var intvl = setInterval(function(){
      $('body').css('background-color', colors[x]);
      setTimeout(function(){
      backtoWhite();
      }, interval/2);
      x++;
      if(x>=3){
        clearInterval(intvl);
      }
    }, interval);

  function backtoWhite() {
      $('body').css('background-color', 'white');
  }
});

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

Answer 2

根据您的代码结构，您可以通过这种方式实现所需的目标：

$(function() {
  let colors = ['red', 'blue', 'green']

  const nbColors = colors.length;
  let repetition = 3;
  let interval = 6000;

  for (let loop = 0 ; loop < repetition ; loop++) {
      for (let i = 0; i < nbColors; i++) {
        setTimeout(function() {
          $('body').css('background-color', colors[i]);
          backtoWhite();

        }, (i + loop * nbColors) * interval)
      }
  }

  function backtoWhite() {
    setTimeout(function() {
      $('body').css('background-color', 'white');
    }, interval / 2);
  }
});

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

但是，这缺少了函数式编程的巨大潜力。您应该考虑使用callback来在当前操作完成后触发下一次颜色更改，而不是立即以不同的执行延迟一次触发所有颜色。

Answer 3

使用一个interval，就可以像这样完成颜色更改，循环颜色阵列。
在每个颜色更改之间应用白色。

$(function() {
  let colors = ['red', 'blue', 'green']
  let index = 0;
  let whiteInBetween = false;  // A "flag" to toggle at each iteration to determine if to apply white instead of color.

  setInterval(function() {
    if(whiteInBetween){
      $('body').css('background-color', "white");
    }else{
      $('body').css('background-color', colors[index]);
      index++
    }
    whiteInBetween = !whiteInBetween;  // "Flag" toggling
    index = index%colors.length;  // Keeping the color index in range, using the remainder of the index divided by the color array length
    
  },1000);  // Interval setted faster for this demo...  

});

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

Answer 4

您的for循环的执行速度比timeout快，因此您可能只看到第一次或最后一次迭代。在处理计时时，建议减少变量，而增加递归或回调。

此外，我假设您希望每种颜色的时间保持不变，因为red的索引为0，而i * interval则意味着您永远不会看到红色。

let colors = ['red','white','blue','white','green','white'];

function SetBackgroundColor(colorIndex) {
    colorIndex = colorIndex >= colors.length - 1 ? 0 : ++colorIndex; //constrain index  
    
    $('body').css({'background-color': colors[colorIndex]}); //set color
    
    setTimeout(
      function() { SetBackgroundColor(colorIndex); }, //recursion
      colors[colorIndex] === 'white' ? 3000 : 6000); //select timeout
}

SetBackgroundColor(-1); //initialize

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

设定间隔的设定计数

4 个答案: