首頁猿問需要解決異步代碼的問題

需要解決異步代碼的問題

JavaScript

胡說叔叔 2021-11-18 09:46:25

我做了一個小游戲，里面有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條經驗獲得超13個贊

回答：

在運行之前，您需要等待圖像完成加載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>

<title>Document</title>

</head>

<body>

<button id="btn" onclick="TryAgain()">Try Again</button>

</body>

</html>

反對回復 2021-11-18

一只甜甜圈

TA貢獻1836條經驗獲得超5個贊

設置this.src 后，圖像不會立即出現

當瀏覽器準備好顯示它們時，它們就會出現，這可能需要一些時間。也許您可以使用“加載”事件偵聽器？一旦圖像可見，這將觸發。在那個階段你可以做警報嗎？

images[i].addEventListener("load", function(e) {

// This will run only once the image is loaded (i.e. visible)

} )

反對回復 2021-11-18

2 回答
0 關注
148 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

需要解決異步代碼的問題

需要解決異步代碼的問題

2 回答

添加回答