Нужно решить проблему с асинхронным кодом - PullRequest
Новая
       6

Нужно решить проблему с асинхронным кодом

0 голосов
/ 11 октября 2019

Я сделал небольшую игру, в которой есть 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 lang="en">
<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>

Ответы [ 2 ]

1 голос
/ 11 октября 2019

Изображения не появляются, как только вы установите this.src

Они появляются, когда браузер готов показать их, что может занять некоторое время. Возможно, вы можете использовать прослушиватель событий load? Это сработает, как только изображение станет видимым. На этом этапе вы можете сделать предупреждение? 

images[i].addEventListener("load", function(e) { 
  // This will run only once the image is loaded (i.e. visible)
} )
1 голос
/ 11 октября 2019

Ответ:

Необходимо дождаться загрузки изображений, прежде чем запускать 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 lang="en">
<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...