在掷骰子事件侦听器中，如何将警报延迟到加载新骰子图像之后

Question

我正在练习javascript，并创建了一个带有两个骰子和数字1-12的小骰子掷东西。掷骰子，与掷骰子总数匹配的数字 (1-12( 得到一个红色虚线边框，当您单击它时，它会变成灰色。

我的图像源是"die_1"到"die_6"，我只是随机生成一个数字 1-6，然后将其放入"die_"字符串中以更改图像的 src。

现在，如果您滚动的数字已经是灰色的，我会弹出一个警报，上面写着"再次滚动"。

我的问题是：在我当前的实现中，警报会在骰子图像更改之前弹出。一旦我单击"确定"，骰子就会改变以显示掷出的数字。有没有办法延迟警报，直到骰子的图像发生变化？

var diePicture1 = document.getElementById("die1");
var diePicture2 = document.getElementById("die2");
const NUMBERBUTTONS = document.querySelectorAll(".number-button");
buttonRoll = document.getElementById('roll');
/* Gets the values of the dice and adds them */
function totalDice(){
  var die1Value = parseInt(diePicture1.src.substring(diePicture1.src.length - 5,diePicture1.src.length-4));
  var die2Value = parseInt(diePicture2.src.substring(diePicture2.src.length - 5,diePicture1.src.length-4));
  var result = die1Value + die2Value;
  return result;
}
buttonRoll.addEventListener('click', function(){
/*Randomly generates two numbers 1-6
then changes the img src to match */

  var dieNumber1 = Math.floor(Math.random()*6) +1;
  var dieNumber2 = Math.floor(Math.random()*6) +1;
  diePicture1.src = "die_" + dieNumber1 +".png";
  diePicture2.src = "die_" + dieNumber2 +".png";
  var total = totalDice();
/*Checks to see if there are any numbers leftover
with a red border. If so, clears them */
  currentNumber = NUMBERBUTTONS[total-1];
  for (i=0; i<12; i++) {
    if (NUMBERBUTTONS[i].style.border = "2px dashed red"){
      NUMBERBUTTONS[i].style.border = "";
    }
  }
/*Gives red border if the color is not gray already */

  if (currentNumber.style.background != "gray") {
    currentNumber.style.border = "2px dashed red";
  } else {
/*this is what is popping up before the dice images have had a chance 
to change on screen */
    alert("Roll Again");
  }
}, false);
/*Turns number gray when clicked on IF border is red */
document.addEventListener('click',function(e){
  if (e.target.style.border === "2px dashed red"){
    e.target.style.border = "";
    e.target.style.background = "gray";
  }

},false);

Answer 1

很简单。set 超时函数需要两个参数，即要运行的内容以及要运行的时间，因此请将警报放入方法中并设置超时。

点击链接了解更多详情https://www.w3schools.com/js/js_timing.asp

Answer 2

您是否尝试过添加 setTimeOut 方法？将弹出警报的超时设置为在骰子的图像更改之后。

Answer 3

尝试使用承诺。

  var dieNumber1 = Math.floor(Math.random()*6) +1;
  var dieNumber2 = Math.floor(Math.random()*6) +1;
  diePicture1.src = "die_" + dieNumber1 +".png";
  diePicture2.src = "die_" + dieNumber2 +".png";
  var total = totalDice();
  var promise1 = new Promise((resolve, reject) => {
    diePicture1.addEventListener('load', () => {
      resolve();
    })
  })
  var promise2 = new Promise((resolve, reject) => {
    diePicture2.addEventListener('load', () => {
      resolve();
    })
  })
...
Promise.all([promise1, promise2]).then(() => {alert('Roll Again')})

在这里，在加载两个图像之前，警报不会发生。