图像无法在 SetTimeout 中重新出现

Question

功能：

用户将点击图像（斑点组）以将其删除。当用户点击图片时，图片会淡出。但是图片会在10s后重新出现，如果用户没有点击图片，10s后不会显示新图片。

做了什么：

每次点击，图像都会淡出。其次，我确实理解图像在 10 秒后重新出现，如果用户点击初始图像并且它消失，我需要具有以下过程特征：

1.) 进行条件检查，如果点击图像消失，新的相同图像将在 setInterval 函数的 10 秒后重新出现。否则，return false 并且在用户点击图像之前不执行任何操作。

问题：

在这一点上，我卡在如何创建执行条件检查的函数调用以及如何使新图像在初始图像淡出 10 秒后重新出现。

我需要帮助。谢谢

代码：

function A() {

  var CounterInterval, counter = 0,
    timer = 30;
  var GameScore = 0,
    tap_Spots = false;

  $('#GamePage').fadeIn({
    duration: slideDuration,
    queue: false
  });
  $('#GamePage').animate({
    'left': '0px'
  }, {
    duration: slideDuration,
    easing: 'easeInOutQuart',
    queue: false,
    complete: function() {

      $('#GameTimer').show();
      CounterInterval = setInterval(function() {
        counter = counter + 1;
        timer = timer - 1;
        $("#GameTimer").attr("src", "img/TimeLeft/Timer_" + timer + ".png");
        console.log("Time left is:" + timer);

        //End Of Game Condition
        if (timer == 0) {
          clearInterval(CounterInterval);
          $('#GamePage').fadeOut({
            duration: slideDuration,
            queue: false
          });
          $('#GamePage').animate({
            'left': '1081px'
          }, {
            duration: slideDuration,
            easing: 'easeInOutQuart',
            queue: false
          });

          $('#ResultPage').fadeIn({
            duration: slideDuration,
            queue: false
          });
          $('#ResultPage').animate({
            'left': '0px'
          }, {
            duration: slideDuration,
            easing: 'easeInOutQuart',
            queue: false
          });
        } else if (timer < 30 && timer > 0) {
          //Game Method
          $("#Spot_1").click(function() {

            //Remove the spots
            $("#Spot_1").fadeOut();
            console.log("blackspot is removed");
            //Increment score by 10
            GameScore = GameScore + 10;
            $("#GameScore").attr("src", "img/ScorePoint/Score_" + GameScore + ".png");

            //create Interval for spots to reappear after user clicks on spots
            if (tap_Spots == true) {
              setTimeout(function() {
                $("#Spot_1").fadeIn();
                console.log("blackspot re-appears");
              }, 3000);
            } else return false;

          });
          $("#Spot_2").click(function() {
            //create Interval for spots to reappear after user clicks on spots
            $("#Spot_2").fadeOut();
            console.log("blackspot #2 is removed");
            GameScore = GameScore + Score;
            $("#GameScore").attr("src", "lib/SKII/img/Page09/ScorePoint/Score_" + GameScore + ".png");
          });
          $("#Spot_3").click(function() {
            //create Interval for spots to reappear after user clicks on spots
          });
          $("#Spot_4").click(function() {
            //create Interval for spots to reappear after user clicks on spots
          });
          $("#Spot_5").click(function() {
            //create Interval for spots to reappear after user clicks on spots
          });
          $("#Spot_6").click(function() {
            //create Interval for spots to reappear after user clicks on spots
          });
        }
      }, 1000)
    }
  });
}

#PlayTime {
  position: absolute;
  top: 180px;
  width: 200px;
  height: 200px;
  left: 150px;
  z-index: 100;
}
#Score {
  position: absolute;
  top: 180px;
  width: 200px;
  height: 200px;
  left: 830px;
  z-index: 100;
}
#Spot_1 {
  position: absolute;
  top: 940px;
  width: 100px;
  height: 100px;
  left: 450px;
  z-index: 100;
}
#Spot_2 {
  position: absolute;
  top: 1000px;
  width: 100px;
  height: 100px;
  left: 550px;
  z-index: 100;
}
#Spot_3 {
  position: absolute;
  top: 1050px;
  width: 100px;
  height: 100px;
  left: 350px;
  z-index: 100;
}
#Spot_4 {
  position: absolute;
  top: 1200px;
  width: 100px;
  height: 100px;
  left: 500px;
  z-index: 100;
}
#Spot_5 {
  position: absolute;
  top: 1160px;
  width: 100px;
  height: 100px;
  left: 630px;
  z-index: 100;
}
#Spot_6 {
  position: absolute;
  top: 1380px;
  width: 100px;
  height: 100px;
  left: 480px;
  z-index: 100;
}

<div id="GamePage" style="position:absolute; z-index:11; top:0; width: 1080px; height: 1920px; margin:auto;">

  <span id="Score"><img id = "GameScore" src="img/ScorePoint/Score_0.png"></span>
  <span id="PlayTime"><img id = "GameTimer" src="img/TimeLeft/Timer_30.png"></span>

  <img id="Spot_1" src="img/Spot_01.png" />
  <img id="Spot_2" src="img/Spot_02.png" />
  <img id="Spot_3" src="img/Spot_03.png" />
  <img id="Spot_4" src="img/Spot_04.png" />
  <img id="Spot_5" src="img/Spot_05.png" />
  <img id="Spot_6" src="img/Spot_06.png" />
</div>

Answer 1

设法解决了我自己的问题，那就是设置每个点被点击时的条件tap_Spots = true。因此，正确的代码语法将起作用：

$("#Spot_1").click(function() {
  //create Interval for spots to reappear after user clicks on spots

  //Set check condition to true when spots have been clicked
  tap_Spots = true;
  
  //Remove the spots 
  $("#Spot_1").fadeOut();
  
  console.log("Spot_1 is removed");
  
  //Increment score by 10ss
  GameScore = GameScore + Score;
  $("#GameScore").attr("src", "lib/SKII/img/Page09/ScorePoint/Score_" + GameScore + ".png");

  console.log(tap_Spots);
  
  //create Interval for spots to reappear after user clicks on spots
  
  if (tap_Spots == true) {
    //reset the check condition to default
    tap_Spots = false;
    console.log("tap_Spots=true");
    setTimeout(function() {
      $("#Spot_1").fadeIn();
      console.log("Spot_1 re-appears");
    }, 3000);
  } else return false;
});

Answer 2

你把事情搞得比实际情况要复杂得多。不需要为每个点单独的函数，也不需要你的 tap_Spots boolean:

$('img').click(function() {
  var self = this; // hold onto the clicked DOM node for later reference
  $(self).fadeOut(); // fade it out
  // do your game score stuff here
  window.setTimeout(function() { 
    $(self).fadeIn(); // setTimeout has elapsed, can fade back in
  },3000); // 3 seconds here, not 10, just for easier demo
});

.positioner {
  width: 50px; height: 50px; border: 1px solid; display: block; float:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- changed images to different urls, see comments below -->
<div class="positioner"><img src="//placehold.it/50x50"></div>
<div class="positioner"><img src="//placehold.it/51x51"></div>
<div class="positioner"><img src="//placehold.it/49x49"></div>
<div class="positioner"><img src="//placehold.it/35x35"></div>
<div class="positioner"><img src="//placehold.it/55x55"></div>
<div class="positioner"><img src="//placehold.it/50x45"></div>
<div class="positioner"><img src="//placehold.it/52x51"></div>
<div class="positioner"><img src="//placehold.it/50x50"></div>

图像无法在 SetTimeout 中重新出现

Image unable to re-appear in SetTimeout

javascript

jquery

settimeout

setinterval