JavaScript循环从数组中随机选择

Question

我对此有疑问。 我想每次加载弹出窗口时从数组中选择随机单词。 但是这个词没有改变。 我总是得到如下结果：

(march, march, march.. january, january, january, january, january)...

它只是选择随机的月份，然后在每个循环中使用它。 我想使其在每个循环中都是随机的。 有人可以帮帮我吗？

 var i; for (i = 0; i < 5; i++) { $("#notification").fadeIn("slow").delay(1000).fadeOut("slow"); var myArray = ['January', 'February', 'March']; var rand = myArray[Math.floor(Math.random() * myArray.length)]; document.getElementById("notification").innerHTML = rand; } //$("#notification").append(rand); 

 #notification { position: fixed; bottom: 5px; left: 5px; width: 170px; /* set to 100% if space is available */ height: 70px; z-index: 105; text-align: center; font-weight: normal; font-size: 12px; color: white; background-color: #FF7800; box-shadow: 0 0 10px #222; padding: 5px; opacity: 0.7; filter: alpha(opacity=70); /* For IE8 and earlier */ } #notification span.dismiss { border: 2px solid #FFF; padding: 0 5px; cursor: pointer; float: right; margin-right: 10px; } #notification a { color: white; text-decoration: none; font-weight: bold } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="notification" style="display: none;"> <span class="dismiss"><a title="dismiss this notification">X</a></span> </div> 

JSfiddle 链接

Answer 1

您的for循环会在动画开始之前立即完成，因此您只会看到最后生成的随机值。

相反，您需要每次都等待动画完成，然后再进行下一次迭代。 您可以使用fadeOut的回调参数来执行此操作：

 var myArray = ['January', 'February', 'March']; (function loop(i) { if (i >= 5) return; // all iterations have been completed var rand = myArray[Math.floor(Math.random() * myArray.length)]; document.getElementById("notification").textContent = rand; // Use callback argument of fadeOut to chain to next iteration // when the animation is complete $("#notification").fadeIn("slow").delay(1000).fadeOut("slow", loop.bind(null, i+1)); })(0); // Execute the loop function immediately with i = 0 

 #notification { position: fixed; bottom: 5px; left: 5px; width:170px; /* set to 100% if space is available */ height: 70px; z-index:105; text-align:center; font-weight:normal; font-size:12px; color:white; background-color:#FF7800; box-shadow:0 0 10px #222; padding:5px; opacity: 0.7; filter: alpha(opacity=70); /* For IE8 and earlier */ } #notification span.dismiss { border:2px solid #FFF; padding:0 5px; cursor:pointer; float:right; margin-right:10px; } #notification a { color:white; text-decoration:none; font-weight:bold } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="notification" style="display: none;"> <span class="dismiss"><a title="dismiss this notification">X</a></span> </div> 

Answer 2

您可以通过for循环添加动画延迟。

但是，所有随机值都是在第一个刻度处计算的。

var i;
var myArray = ['January', 'February', 'March','April','May']; 
for (i = 0; i < 5; i++) { 
$("#notification").fadeIn("slow").delay(1000).fadeOut("slow");

setTimeout(function(){
var rand = myArray[Math.floor(Math.random() * myArray.length)];
  document.getElementById("notification").innerHTML = rand;
  // slow refer to 600ms, 600*2+1000 = 2200
  },2200*i);
}

http://jsfiddle.net/vmsb14dL/81/