使用setTimeout使div闪烁1秒

Question

我试图让一组四个不同颜色的div以随机顺序闪烁一秒，每次重复添加一个闪存，通过添加一个将其不透明度设置为0的类，但仅限于序列中的最后一个div似乎在闪烁，这里是javascript代码：

  $(function() {
      x="";

      for(i=0;i<3;i++){
          x+=String(Math.floor(Math.random()*4)+1);
          $("#test").append(x);
          j=0;
          flashinglight();
          $("#red").removeClass("redflash");
          $("#blue").removeClass("blueflash");
          $("#yellow").removeClass("yellowflash");
          $("#green").removeClass("greenflash");
      };
  })

function flashinglight(){
    if(j<x.length){

        setTimeout(function(){
            $("#red").removeClass("redflash");
            $("#yellow").removeClass("yellowflash");
            $("#green").removeClass("greenflash");
            $("#blue").removeClass("blueflash");
            if(x[j]=="1"){ 
                $("#red").addClass("redflash");
            }
            else if(x[j]=="2"){
                $("#yellow").addClass("yellowflash");
            }
            else if(x[j]=="3"){
                $("#green").addClass("greenflash");
            }
            else if(x[j]=="4"){                       
                $("#blue").addClass("blueflash");
            }  
            j+=1;
            flashinglight();

        },1000);
    }
    else{
        return;
    }
}

Answer 1

你会很高兴知道它可以简单得多。 :-)请参阅内联评论：

// Your existing ready callback
$(function() {
  // Array of color names
  var colors = ["red", "blue", "yellow", "green"];
  
  // Start
  flashlight();
  
  function flashlight() {
    // Get a random color
    var c = colors[Math.floor(Math.random() * colors.length)];
    // Get the matching element
    var elm = $("#" + c);
    // And class
    var cls = c + "flash";
    // Add the class
    elm.addClass(cls);
    // A second later...
    setTimeout(function() {
      // Remove it
      elm.removeClass(cls);
      // And run again
      flashlight();
    }, 1000);
  }
});

.container div {
  display: inline-block;
  width: 40px;
  height: 40px;
}
#red {
  border: 2px solid red;
}
#blue {
  border: 2px solid blue;
}
#yellow {
  border: 2px solid yellow;
}
#green {
  border: 2px solid green;
}
.redflash {
  background-color: red;
}
.blueflash {
  background-color: blue;
}
.yellowflash {
  background-color: yellow;
}
.greenflash {
  background-color: green;
}

<div class="container">
  <div id="red"></div>
  <div id="blue"></div>
  <div id="yellow"></div>
  <div id="green"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

在进入下一个之前，“闪烁”一整秒。如果你需要更短的闪光和它们之间的延迟，那只需要设置第二个计时器。

看了一会儿，当两次采摘相同的颜色时，它让我感到困扰。因此，如果您想要一个在选择下一个时排除当前颜色的版本：

// Your existing ready callback
$(function() {
  // Array of color names
  var colors = ["red", "blue", "yellow", "green"];
  
  // The current color
  var color = null;
  
  // Start
  flashlight();
  
  function flashlight() {
    // Pick a random color, excluding the one we're currently using
    var available = colors.filter(function(c) {
      return c !== color;
    });
    color = available[Math.floor(Math.random() * available.length)];
    // Get the matching element
    var elm = $("#" + color);
    // And class
    var cls = color + "flash";
    // Add the class
    elm.addClass(cls);
    // A second later...
    setTimeout(function() {
      // Remove it
      elm.removeClass(cls);
      // And run again
      flashlight();
    }, 1000);
  }
});

.container div {
  display: inline-block;
  width: 40px;
  height: 40px;
}
#red {
  border: 2px solid red;
}
#blue {
  border: 2px solid blue;
}
#yellow {
  border: 2px solid yellow;
}
#green {
  border: 2px solid green;
}
.redflash {
  background-color: red;
}
.blueflash {
  background-color: blue;
}
.yellowflash {
  background-color: yellow;
}
.greenflash {
  background-color: green;
}

<div class="container">
  <div id="red"></div>
  <div id="blue"></div>
  <div id="yellow"></div>
  <div id="green"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>