do whileループとsetIntervalタイマー関数を組み合わせる方法

Question

do whileループとsetInterval関数を組み合わせてサイコロをシミュレートしようとしています。

目標はこれです：ユーザーはダイスロールボタンをクリックします。一連の数字が表示され、ロールが停止して値を返します。

私の考えは、サイコロが「ローリング」するのを止める前に、「do while」ループを使用して反復回数を制御することでした。私はいくつかのことを試しましたが、これまでに何も働いていません。私の最近の試みは以下の通りです。

function diceRoll(){ 
    theNum = Math.floor(Math.random() * 6) + 1; 
    counter = counter + 1; 
    console.log(theNum); 
    console.log(counter); 
} 

$(document).ready(function(){ 
    counter = 1; 
    myVar = ''; 
    $('#start').click(function(){ 
     do { 
     // 
     myVar = setInterval(function(){ diceRoll() }, 500); 
     } while (counter < 10) 
    }); 

Answer 1

do whileループを忘れてください。それぞれの時間間隔で適切に行動できるように、「状態」を把握するだけで済みます。 counterはこの単純なケースで問題なく動作します。

間隔を使用する場合は、間隔を終了するときに間隔をクリアする必要があります。また、サイコロをしながらスタートボタンを「ブロック」することも理にかなっています。ここで

は、あなたがやろうとしているものを達成すべきであるあなたのコードの変形例である：

var vals = ["\u2680", "\u2681", "\u2682", "\u2683", "\u2684", "\u2685"]; 
 

 
function setValue(num) { 
 
    $("div").text(vals[num - 1]); 
 
} 
 

 
var intervalId; 
 
var counter = 1; 
 

 
function diceRoll() { 
 
    theNum = Math.floor(Math.random() * 6) + 1; 
 
    counter = counter + 1; 
 
    setValue(theNum); 
 
} 
 

 
$(document).ready(function() { 
 

 
    $('#start').click(function() { 
 
    if (intervalId) 
 
     return; // Don't allow click if already running. 
 

 
    intervalId = setInterval(function() { 
 
     if (counter < 10) 
 
     diceRoll(); 
 
     else { 
 
     // Reset state ready for next time. 
 
     clearInterval(intervalId); 
 
     intervalId = null; 
 
     counter = 1; 
 
     } 
 
    }, 500); 
 
    }); 
 
});

div { 
 
    font-size: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a id="start">Click to Roll</a> 
 

 
<div> 
 

 
</div>

Answer 2

setIntervalすぐに戻りますので、あなたのコードがやっているすべては、繰り返しの非常に大きな数をキックオフされる（多くの多くのバージョンが実行される前counter変数がインクリメントされません）

あなただけ思い出す必要があります関数内からのsetTimeoutと同じ機能です。

var counter = 0; 
 

 
function diceRoll(){ 
 
    theNum = Math.floor(Math.random() * 6) + 1; 
 
    counter = counter + 1; 
 
    console.log(theNum); 
 
    console.log(counter); 
 
    if(counter<10){ 
 
     setTimeout(diceRoll,500); 
 
    } 
 
} 
 

 
diceRoll()

Answer 3

あなたはdo whileは必要ありません。自分でインデックスを作成するだけで済みます。あなたの例ではfiddle

function diceRoll() { 
    theNum = Math.floor(Math.random() * 6) + 1; 
    console.log(theNum); 
} 

$(document).ready(function() { 
    var counter = 1; 

    var interval = setInterval(function() { 
    if (counter < 10) { 
     diceRoll() 
     counter = counter + 1; 
    } else { 
     clearInterval(interval); 
    } 
    }, 500); 

}); 

Answer 4

2つの問題、

最初の問題はある、のsetIntervalは、あなたが同様の目的のためにdo-while文を必要としない、特定の関数の後に与えられた関数を実行し続けます。

第二の問題ではなくてclearIntervalにカウンター< 10かどうかを実行しておくと、チェックするのsetIntervalを使用しての、あなたは、カウンタ< 10別のタイムアウトを作成するには、代わりのsetTimeoutを使用してdiceRoll関数自体を呼び出すことが、あります。

var counter, 
    timeout; 

function diceRoll(){ 
    theNum = Math.floor(Math.random() * 6) + 1; 
    counter = counter + 1; 
    console.log(theNum); 
    console.log(counter); 
    if (counter < 10) { 
     timeout = setTimeout(diceRoll, 500); 
    } 
} 

$(document).ready(function(){ 
    $('#start').click(function(){ 
     if (timeout) { 
      clearTimeout(timeout); 
      timeout = null; 
     } 
     counter = 0; 
     diceRoll(); 
    }); 
}