javascript - Image unable to re-appear in SetTimeout -

functionality:

users tap on image(group of spots) removed. when user click on image, image fadeout. however, image re-appear after 10s later, if user not click on image, new image not displayed after 10s.

what has been done:

at each click, image fadeout. secondly, understand image reappear after 10 seconds, should user tap on initial image , disappears, need have following process features:

1.) conditional check, if tap image disappears, new identical image re-appear after 10s setinterval function. else, return false , nothing until user clicks on image.

issue:

at point, stuck @ how create function call performs conditional check , enable new image re-appear after 10s when initial image fadesout.

i need help. thanks.

code:

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 spots              $("#spot_1").fadeout();              console.log("blackspot removed");              //increment score 10              gamescore = gamescore + 10;              $("#gamescore").attr("src", "img/scorepoint/score_" + gamescore + ".png");                //create interval spots 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 spots reappear after user clicks on spots              $("#spot_2").fadeout();              console.log("blackspot #2 removed");              gamescore = gamescore + score;              $("#gamescore").attr("src", "lib/skii/img/page09/scorepoint/score_" + gamescore + ".png");            });            $("#spot_3").click(function() {              //create interval spots reappear after user clicks on spots            });            $("#spot_4").click(function() {              //create interval spots reappear after user clicks on spots            });            $("#spot_5").click(function() {              //create interval spots reappear after user clicks on spots            });            $("#spot_6").click(function() {              //create interval spots 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>

you're making lot more complicated needs be. no need separate functions each spot, , no need tap_spots boolean:

$('img').click(function() {    var self = this; // hold onto clicked dom node later reference    $(self).fadeout(); // fade out    // game score stuff here    window.settimeout(function() {       $(self).fadein(); // settimeout has elapsed, can fade in    },3000); // 3 seconds here, not 10, 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 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>