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

【问题标题】：Within a dice roll event listener, how can I delay an alert until after the new dice images have loaded?在掷骰子事件侦听器中，如何将警报延迟到新骰子图像加载后？
【发布时间】：2019-04-10 04:42:13
【问题描述】：

我正在练习 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);

【问题讨论】：

我相信diePicture1 有一个onload 你可以让usr 使用
谢谢。我什至可以将其余部分移至事件侦听器，以便在 buttonRoll 事件侦听器中“加载”。

标签： javascript addeventlistener

【解决方案1】：

很简单。设置超时函数有两个参数，你想要运行什么以及你希望它运行的时间，因此将你的警报放入方法中并设置超时。

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

【讨论】：

【解决方案2】：

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

【讨论】：

好主意。仅将其应用于警报功能的正确语法是什么？

【解决方案3】：

尝试使用Promises。

  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')})

在这里，只有两个图像都加载完毕后才会出现警报。

【讨论】：