[英]Can a for-loop wait until a function within it has finished executing?
I am building a Simon game, and have built a function for each new round as so: 我正在构建一个Simon游戏,并为每个新回合构建了一个函数,如下所示:
var game = [];
var squares = ["green", "red", "blue", "yellow"];
var newRound = function() {
// adds a new round to the end of the game array
game.push(squares[Math.floor(Math.random() * squares.length)]);
// for loop to run through the game array
for (var x = 0; x < game.length; x++) {
playButton(game[x]);
}
}
Then, I built another function which controls the animation and sound for each time the square is either hit by a user, or cycled through my for-loop 然后,我构建了另一个函数,该函数可以在用户每次点击方块或在for循环中循环播放时控制动画和声音
var playButton = function(color){
$("#"+color).addClass(color+"--active active", 300, function(){
$("#audio-"+color).trigger('play');
$("#"+color).removeClass(color+"--active active", 300)
});
Right now, my for-loop just cycles through all the animations and sounds in one go. 现在,我的for循环只需要一次浏览所有动画和声音。 How can I make the for-loop wait for the playButton function to finish execution before cycling through again?
如何让for循环等待playButton函数完成执行然后再次循环?
You can convert your for loop into a recursive function that plays the current button and then tries to play the next button after all animations are done. 您可以将for循环转换为递归函数,该函数播放当前按钮,然后在完成所有动画后尝试播放下一个按钮。 Something like:
就像是:
var newRound = function() {
// adds a new round to the end of the game array
game.push(squares[Math.floor(Math.random() * squares.length)]);
// start playing from the first button
playButton(game, 0);
}
function playButton(game, index) {
if (index < game.length) { // if this button exists, play it
var color = game[index];
$("#" + color).addClass(color + "--active active", 300, function() {
$("#audio-" + color).trigger('play');
$("#" + color).removeClass(color + "--active active", 300, function() {
playButton(game, index + 1); // once this button was played, try to play the next button
});
});
}
}
Javascript is single-threaded, so what you are asking for is already happening. Javascript是单线程的,因此您所要求的已经在发生。 However your DOM isn't updated because sometimes your DOM elements aren't there.
但是,您的DOM不会更新,因为有时您的DOM元素不存在。 The DOM updation is out-of-sync with your javascript.
DOM更新与您的JavaScript不同步。
So instead, you can execute your playButton
function at set intervals. 因此,您可以按设置的时间间隔执行
playButton
函数。
if(x<game.length) {
setInterval(playButton(x), <someSmallNumber like 0.2 milliseconds>);
}
Then increment x. 然后增加x。 By incrementing color, x gets incremented since it's a pass by reference.
通过增加颜色,x会增加,因为它是通过引用传递的。
var playButton = function(color){
$("#"+color).addClass(color+"--active active", 300, function(){
$("#audio-"+color).trigger('play');
$("#"+color).removeClass(color+"--active active", 300)
color++;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.