setInterval（）が完了するまで待機します
私のJavaScriptコードに小さなサイコロの転がり効果を追加したいと思います。 setInterval()メソッドを使用するのが良い方法だと思います。私の考えはコードに従うことでした（テストのためだけです）：
_function roleDice() {
var i = Math.floor((Math.random() * 25) + 5);
var j = i;
var test = setInterval(function(){
i--;
document.getElementById("dice").src = "./images/dice/dice" + Math.floor((Math.random() * 6) + 1) + ".png";
if(i < 1) {
clearInterval(test);
}
}, 50);
}
_ここで、setIntervalが完了するまで待機します。そこで、setTimeoutを追加しました。
_setTimeout(function(){alert("test")}, (j + 1) * 50);
_このコードは大丈夫です。しかし、私のメインコードでは、roleDice()関数が値を返します。どうすればそれを処理できるのかわかりません... setTimeout()から戻ることができません。関数の最後にリターンを追加すると、リターンが速くなります。誰かがアイデアを持っていますか、どうすればそれを修正できますか？
編集うーん、そうですね、コールバックの量はわかりました。それがどのように機能するかはわかっていると思いますが、それでも問題は解決していません。もっと「インターフェース」の問題だと思います...ここに私のコード：
_function startAnimation(playername, callback) {
var i = Math.floor((Math.random() * 25) + 5);
var int = setInterval(function() {
i--;
var number = Math.floor((Math.random() * 6) + 1);
document.getElementById("dice").src = "./images/dice/dice" + number + ".png";
if(i < 1) {
clearInterval(int);
number = Math.floor((Math.random() * 6) + 1);
addText(playername + " rolled " + number);
document.getElementById("dice").src = "./images/dice/dice" + number + ".png";
callback(number);
}
}, 50);
}
function rnd(playername) {
var callback = function(value){
return value; // I knew thats pointless...
};
startAnimation(playername, callback);
}
_関数rnd()は待機して値を返す必要があります...少し混乱しています。現時点では、どうすればいいのかわかりません...コードは_var callback..._を待ちますが、リターンと組み合わせるにはどうすればよいですか。アニメーションを実行し、その後rnd()を使用して最後の数値を他の関数に戻したいと思います。
あなたは、ほとんどの人が非同期プログラミングに触れたときにある時点でぶつかる落とし穴に遭遇しました。
タイムアウト/間隔が終了するのを「待つ」ことはできません-終了しようとしても機能しないか、ページ/ブラウザ全体をブロックしません。遅延後に実行する必要があるコードは、「完了」したときにsetIntervalに渡したコールバックから呼び出す必要があります。
function rollDice(callback) {
var i = Math.floor((Math.random() * 25) + 5);
var j = i;
var test = setInterval(function() {
i--;
var value = Math.floor((Math.random() * 6) + 1);
document.getElementById("dice").src = "./images/dice/dice" + value + ".png";
if(i < 1) {
clearInterval(test);
callback(value);
}
}, 50);
}
その後、次のように使用します。
rollDice(function(value) {
// code that should run when the dice has been rolled
});
TheifMasterの回答の更新：
Promiseを使用できるようになりました
コールバックと同様に、Promiseを使用して、プログラムの実行が終了したときに呼び出される関数を渡すことができます。rejectを使用すると、Promiseでエラーを処理することもできます。
function rollDice() {
return new Promise((resolve, reject) => {
const dice = document.getElementById("dice")
let i = Math.floor((Math.random() * 25) + 5)
const intervalId = setInterval(() => {
const diceValue = Math.floor((Math.random() * 6) + 1)
dice.src = `./images/dice/dice${diceValue}.png`
if (--i < 1) {
clearInterval(intervalId)
resolve(diceValue)
}
}, 50)
})
}
次に、次のように使用します。
rollDice().then(value => alert(`Dice rolled: ${value}`))
元々、コードはすべて順次でした。これは、2人のプレーヤーが1つを振って、誰がより大きい数字を持っているかを見る基本的なサイコロゲームです。 [引き分けの場合は2人目が勝ちます！]
function roleDice() {
return Math.floor(Math.random() * 6) + 1;
}
function game(){
var player1 = roleDice(),
player2 = roleDice(),
p1Win = player1 > player2;
alert( "Player " + (p1Win ? "1":"2") + " wins!" );
}
game();
上記のコードは流れるだけなので本当に簡単です。サイコロを振るような非同期メソッドを使用する場合、処理を行うために、物事をチャンクに分割する必要があります。
function roleDice(callback) {
var i = Math.floor((Math.random() * 25) + 5);
var j = i;
var test = setInterval(function(){
i--;
var die = Math.floor((Math.random() * 6) + 1);
document.getElementById("dice").src = "./images/dice/dice" + die + ".png";
if(i < 1) {
clearInterval(test);
callback(die); //Return the die value back to a function to process it
}
}, 50);
}
function game(){
var gameInfo = { //defaults
"p1" : null,
"p2" : null
},
playerRolls = function (playerNumber) { //Start off the rolling
var callbackFnc = function(value){ //Create a callback that will
playerFinishes(playerNumber, value);
};
roleDice( callbackFnc );
},
playerFinishes = function (playerNumber, value) { //called via the callback that role dice fires
gameInfo["p" + playerNumber] = value;
if (gameInfo.p1 !== null && gameInfo.p2 !== null ) { //checks to see if both rolls were completed, if so finish game
giveResult();
}
},
giveResult = function(){ //called when both rolls are done
var p1Win = gameInfo.p1 > gameInfo.p2;
alert( "Player " + (p1Win ? "1":"2") + " wins!" );
};
playerRolls("1"); //start player 1
playerRolls("2"); //start player 2
}
game();
上記のコードは、OOPタイプの方がより良いかもしれませんが、動作します。
上記のソリューションが機能するには、いくつかの問題があります。プログラムを実行しても、（少なくとも私の推奨するブラウザーでは）画像が表示されないため、ゲームを実行する前に画像をロードする必要があります。
また、経験上、N個の画像をプリロードしたり、N人のプレーヤーがサイコロを投げたりするような場合に、コールバックメソッドを開始する最善の方法は、各タイムアウト関数にゼロまでカウントダウンさせ、その時点でコールバックを実行することです。これは魅力のように機能し、処理する必要のあるアイテムの数に依存しません。
<html><head><script>
var game = function(images){
var nbPlayers = 2, winnerValue = -1, winnerPlayer = -1;
var rollDice = function(player,callbackFinish){
var playerDice = document.getElementById("dice"+player);
var facesToShow = Math.floor((Math.random() * 25) + 5);
var intervalID = setInterval(function(){
var face = Math.floor(Math.random() * 6);
playerDice.src = images[face].src;
if (--facesToShow<=0) {
clearInterval(intervalID);
if (face>winnerValue){winnerValue=face;winnerPlayer=player}
if (--nbPlayers<=0) finish();
}
}, 50);
}
var finish = function(){
alert("Player "+winnerPlayer+" wins!");
}
setTimeout(function(){rollDice(0)},10);
setTimeout(function(){rollDice(1)},10);
}
var preloadImages = function(images,callback){
var preloads = [], imagesToLoad = images.length;
for (var i=0;i<images.length;++i){
var img=new Image();
preloads.Push(img);
img.onload=function(){if(--imagesToLoad<=0)callback(preloads)}
img.src = images[i];
}
}
preloadImages(["dice1.png","dice2.png","dice3.png","dice4.png","dice5.png","dice6.png"],game);
</script></head><body>
<img src="" id="dice0" /><img src="" id="dice1" /></body></html>