我創建了一個存盤按鈕 id 的陣列。按鈕ID是#red，#green，#blue和#yellow
我創建了另一個隨機選擇顏色并將其存盤在另一個陣列中的函式。
我打算使用for回圈迭代第二個陣列并在按鈕上使用淡入/淡出效果，因此結果將是有序的淡入和淡出效果。
例如：
array = ['red','green','blue'];
首先紅色按鈕淡入淡出，然后是綠色，最后是藍色。
我得到的結果是幾乎同時出現淡入淡出效果。有人可以提供解決方案并告訴我為什么會這樣嗎？
var buttonColours = ["red", "blue", "green", "yellow"];
var GamePattern = [];
function nextSequence() {
var randomNumber = Math.floor((Math.random() * 4));
var randomChosenColour = buttonColours[randomNumber]
GamePattern.push(randomChosenColour);
}
function playSequence(sequence) {
for (var i = 0; i < sequence.length; i ) {
$("#" sequence[i]).fadeOut(1000).fadeIn(1000)
}
}
nextSequence()
nextSequence()
nextSequence()
playSequence(GamePattern)<link href="https://fonts.googleapis.com/css?family=Press Start 2P" rel="stylesheet">
<h1 id="level-title">Press A Key to Start</h1>
<div class="container">
<div lass="row">
<div type="button" id="green" class="btn green"></div>
<div type="button" id="red" class="btn red"></div>
</div>
<div class="row">
<div type="button" id="yellow" class="btn yellow"></div>
<div type="button" id="blue" class="btn blue"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>uj5u.com熱心網友回復：
您的代碼的問題是因為您在同一個專案中運行所有淡入淡出效果。
您可以通過隨機化輸入陣列的順序來簡化方法和代碼，然后對其進行迭代以淡入/淡出相關元素，為每個元素添加增量延遲，以便一次只發生一次淡入淡出。試試這個：
// shuffle logic credit: https://stackoverflow.com/a/2450976/519413 @coolaj86
function shuffle(array) {
let currentIndex = array.length, randomIndex;
while (currentIndex != 0) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex--;
[array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
}
return array;
}
var buttonColours = ["red", "blue", "green", "yellow"];
shuffle(buttonColours).forEach((id, i) => {
$('#' id).delay(i * 2000).fadeOut(1000).fadeIn(1000);
});.container .row {
display: inline-block;
}
.container .row .btn {
width: 100px;
height: 100px;
display: inline-block;
}
.btn.green { background-color: #0C0; }
.btn.red { background-color: #C00; }
.btn.yellow { background-color: #CC0; }
.btn.blue { background-color: #00C; }<link href="https://fonts.googleapis.com/css?family=Press Start 2P" rel="stylesheet">
<h1 id="level-title">Press A Key to Start</h1>
<div class="container">
<div class="row">
<div type="button" id="green" class="btn green"></div>
<div type="button" id="red" class="btn red"></div>
</div>
<div class="row">
<div type="button" id="yellow" class="btn yellow"></div>
<div type="button" id="blue" class="btn blue"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>uj5u.com熱心網友回復：
默認情況下，Javascript 是異步的——這意味著它不會等待淡入/淡出，除非您明確告訴它這樣做。
我建議使用一個簡單的setTimeout命令，有關更多資訊和替代方法，請參見此處
例如，如果您更改此部分：
for (var i=0 ; i<sequence.length ; i ){
$("#" sequence[i]).fadeOut(1000).fadeIn(1000)
}
對此：
for (var i=0 ; i<sequence.length ; i ){
setTimeout(function() {
$("#" sequence[i]).fadeOut(1000).fadeIn(1000)
}, 2000)
}
它將等待 2000 毫秒，然后再轉到回圈中的下一個點
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/406164.html
標籤：