在while循環內正確執行setInterval

我想在while循環內運行一個setInterval進程，該進程會生成一個隨機骰子數並設置骰子圖形來反映這一點。我打算使用setInterval在每個while循環迭代之間添加一個延遲，以便UI代表骰子「滾動」，而不僅僅是返回最終值。在while循環內正確執行setInterval

就目前看來，setInterval不會停止，不管if語句中放置的條件如何。理想情況下，這將是'num'本身，所以骰子的數量可以在其他地方定義。

//roll dice num times 
function rollDice(num) { 
    var counter = 0; 
    var i = 0; 
    while (i < num){ 
     var diceDOM2 = document.querySelector(".dice"); 

     var diceIntervalID = setInterval(function(){ 

      //1. Rnd number 
      dice2 = Math.floor(Math.random()* 6) + 1; 

      // 2. Update diceDOM with new dice value 
      diceDOM2.style.display = "block"; 
      diceDOM2.src = "dice-" + dice2 + ".png"; 
      console.log(diceDOM2.src); 

      //determine setInterval exit 
      counter++; 
      console.log(counter); 
      if(counter > num){ 
       clearInterval(diceIntervalID); 

      } 
     }, 1500); 
     i++; 
    }; 
};

非常感謝所有

來源

2017-08-27 RickHallett

'setInterval'和任何類型的循環通常都是一個非常糟糕的主意。你想完成什麼_exactly_？ – rossipedia

所以，你想讓骰子繼續滾動n次，每次滾動之間的間隔爲1.5s？ –

@rossipedia，就像曼努埃爾奧托在下面假設的那樣。我忘了將這個帖子的間隔延遲從1500ms減少到最低 - 我只把它設置的很高，這樣我就能更清楚地看到控制檯的日誌記錄。 – RickHallett

這裏是將擲骰子的規定次數和下輥之前等待500毫秒的方法。我認爲這應該會對你有所幫助。

function rollDice(numberOfRolls) {  
 
    console.log(`rolling the dice`); 
 
    var diceThrow = Math.floor((Math.random() * 6) + 1); 
 

 
    console.log(`The dice reads ${diceThrow}`); 
 
    // Lower the number of rolls left. 
 
    numberOfRolls--; 
 

 
    // Check if there is a throw left... 
 
    if (numberOfRolls < 1) { 
 
    console.log('The dice have been rolled the requested number of times.'); 
 
    // No more throws left, exit the method without scheduling a new throw. 
 
    return; 
 
    } 
 

 
    // Set a timeout of 500ms after which to throw the dice again. 
 
    console.log('Waiting 500ms till the next throw'); 
 
    setTimeout(() => { 
 
    // Call the rollDice method with the lowered number of throws. 
 
    rollDice(numberOfRolls); 
 
    }, 500); 
 
    
 
} 
 

 
// Roll the dice 3 times 
 
rollDice(3);

我做了一些改變的片段，因此不會安排一個新的投擲時不再需要它。

來源

2017-08-27 20:04:55 Thijs

太棒了，謝謝！看起來像在循環內遠離setInterval是一個更好的舉動，正如上面提到的@rossipedia！ – RickHallett

如果我對此解決方案的實施還有其他疑問，我會在哪裏發佈該解決方案？ – RickHallett

在這裏？我不確定什麼是StackOveflow這樣做的方式。或者你可以創建一個新的問題，並把鏈接放在這裏。我會盡可能地看看。 – Thijs

在while循環內正確執行setInterval

回答

相關問題