需要解决异步代码的问题
我做了一个小游戏，里面有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回答
-
红颜莎娜
回答：在运行之前，您需要等待图像完成加载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> -
一只甜甜圈
设置this.src 后，图像不会立即出现当浏览器准备好显示它们时，它们就会出现，这可能需要一些时间。也许您可以使用“加载”事件侦听器？一旦图像可见，这将触发。在那个阶段你可以做警报吗？images[i].addEventListener("load", function(e) { // This will run only once the image is loaded (i.e. visible)} )
随时随地看视频慕课网APP
相关分类
JavaScript