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

需要解決異步代碼的問題

JavaScript

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

我做了一個(gè)小游戲，里面有3張箱子的圖片，你可以嘗試選擇一個(gè)有獎(jiǎng)品的箱子。但問題在于異步代碼，失敗或勝利的通知顯示得比將所需圖片放在正確的位置要快，在消息之后，一個(gè)關(guān)閉所有箱子的功能也不允許拍照它的位置。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貢獻(xiàn)1842條經(jīng)驗(yàn) 獲得超13個(gè)贊

回答：

在運(yùn)行之前，您需要等待圖像完成加載alert。

alert完全停止代碼的處理。因此，如果圖像在執(zhí)行之前未加載，您將不會(huì)看到更改發(fā)生。

一個(gè)簡單的模式來做到這一點(diǎn)是：

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>

反對(duì) 回復(fù) 2021-11-18

一只甜甜圈

TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超5個(gè)贊

設(shè)置this.src 后，圖像不會(huì)立即出現(xiàn)

當(dāng)瀏覽器準(zhǔn)備好顯示它們時(shí)，它們就會(huì)出現(xiàn)，這可能需要一些時(shí)間。也許您可以使用“加載”事件偵聽器？一旦圖像可見，這將觸發(fā)。在那個(gè)階段你可以做警報(bào)嗎？

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

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

} )

反對(duì) 回復(fù) 2021-11-18

2 回答
0 關(guān)注
152 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

需要解決異步代碼的問題

需要解決異步代碼的問題

2 回答

添加回答