如何結合do while 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

兩個問題在你的榜樣，

第一個問題是，setInterval的將繼續執行某些功能之後給定功能，你不需要一個do while循環用於類似的目的。

第二個問題是，用計數器< 10來調用diceRoll函數本身，而不是使用setInterval來保持執行並檢查計數器< 10是否爲clearInterval，而是可以使用setTimeout來創建另一個超時。

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(); 
    }); 
}