我做了一个小游戏，里面有3张箱子的图片，你可以尝试选择一个有奖品的箱子。但问题在于异步代码，失败或胜利的通知显示得比将所需图片放在正确的位置要快，在消息之后，一个关闭所有箱子的功能也不允许拍照它的位置。var count=0;var imgArray = new Array();imgArray[0] = new Image();imgArray[0].src ='https://i.pinimg.com/originals/ae/f7/15/aef715f93eadcdf77c4dfa3baf5859ad.jpg'imgArray[1] = new Image();imgArray[1].src = "https://previews.123rf.com/images/gl0ck33/gl0ck331106/gl0ck33110600002/9781614-wooden-chest-with-gold-coins.jpg";imgArray[2] = new Image();imgArray[2].src = "https://i.pinimg.com/originals/94/09/6b/94096bf738837c16582902d281c520bc.jpg";var images = document.getElementsByTagName("img");var k = Math.floor(Math.random() * 3) + 1;console.log("Winning number " + k);for (var i = 0; i < images.length; i++) { images[i].addEventListener("click", function(e) { count++; console.log("Count " + count); if(this.id == k){ count=0; this.src = imgArray[1].src;//here picture with a gift alert("You Win");// here problem,alert Faster than the picture above TryAgain();//And this function is faster to put pictures with closed chests return; } else { this.src = imgArray[0].src;//picture empty chest } if (count >= 1) { count = 0; alert("You lose!!!");//alert Faster than the picture above TryAgain(); return; } }, false);}function TryAgain(e) { for (var i = 0; i < images.length; i++){ images[i].src = imgArray[2].src;//picture with close chest k = Math.floor(Math.random() * 3) + 1; } console.log(k);}<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><body>
2 回答
红颜莎娜
TA贡献1842条经验 获得超12个赞
回答：
在运行之前，您需要等待图像完成加载alert。
alert完全停止代码的处理。因此，如果图像在执行之前未加载，您将不会看到更改发生。
一个简单的模式来做到这一点是：
let self = this;
this.src = imgArray[1].src;
this.onload = function() {
alert("You Win");
self.onload = undefined;
TryAgain();
}
return;
例子：
var count=0;
var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src ='https://i.pinimg.com/originals/ae/f7/15/aef715f93eadcdf77c4dfa3baf5859ad.jpg'
imgArray[1] = new Image();
imgArray[1].src = "https://previews.123rf.com/images/gl0ck33/gl0ck331106/gl0ck33110600002/9781614-wooden-chest-with-gold-coins.jpg";
imgArray[2] = new Image();
imgArray[2].src = "https://i.pinimg.com/originals/94/09/6b/94096bf738837c16582902d281c520bc.jpg";
var images = document.getElementsByTagName("img");
var k = Math.floor(Math.random() * 3) + 1;
console.log("Winning number " + k);
for (var i = 0; i < images.length; i++) {
images[i].addEventListener("click", function(e) {
let self = this;
count++;
console.log("Count " + count);
if(this.id == k){
count=0;
this.src = imgArray[1].src;//here picture with a gift
this.onload = function() {
alert("You Win");// here problem,alert Faster than the picture above
self.onload = undefined;
TryAgain();//And this function is faster to put pictures with closed chests
}
return;
} else {
this.src = imgArray[0].src;//picture empty chest
this.onload = function() {
alert("You Lose");// here problem,alert Faster than the picture above
self.onload = undefined;
TryAgain();//And this function is faster to put pictures with closed chests
}
return;
}
}, false);
}
function TryAgain(e) {
for (var i = 0; i < images.length; i++){
images[i].src = imgArray[2].src;//picture with close chest
k = Math.floor(Math.random() * 3) + 1;
}
console.log(k);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img width="300px" height="300px" src="https://i.pinimg.com/originals/94/09/6b/94096bf738837c16582902d281c520bc.jpg" id="1">
<img width="300px" height="300px" src="https://i.pinimg.com/originals/94/09/6b/94096bf738837c16582902d281c520bc.jpg" id="2">
<img width="300px" height="300px" src="https://i.pinimg.com/originals/94/09/6b/94096bf738837c16582902d281c520bc.jpg" id="3">
<button id="btn" onclick="TryAgain()">Try Again</button>
</body>
</html>
一只甜甜圈
TA贡献1836条经验 获得超5个赞
设置this.src 后，图像不会立即出现
当浏览器准备好显示它们时，它们就会出现，这可能需要一些时间。也许您可以使用“加载”事件侦听器？一旦图像可见，这将触发。在那个阶段你可以做警报吗？
images[i].addEventListener("load", function(e) {
// This will run only once the image is loaded (i.e. visible)
} )
添加回答
举报
0/150
提交
取消