jquery - How to enable a function after another function has timed out -

i've been learning jquery, , i'm trying create simple game test i've learned far. here's game:

a grid of 100 green dots. click any of dots turn 10 of dots blue (at random). 3 seconds later ten blue dots revert green. have click of green dots were blue turn them blue again. it's simple memory game.

so far i've got following code:

$(document).ready(function() { $('#greengrid').one('click', function() {     $('.greentoblue').css('background-color', 'blue');         settimeout(function() {             $('.greentoblue').css('background-color','green');         }, 3000);    }); }); 

this turns 10 of blue dots green when click any dot, disables code can't reveal blue dots simultaneously again.

now want able turn "secret" blue dots blue again clicking each 1 individually. don't know how this. anyone? in advance help.

just bind 1 time click event handler elements @ same time make them green again:

$(document).ready(function () {     $('#greengrid').one('click', function () {         $('.greentoblue').css('background-color', 'blue');         settimeout(function () {           $('.greentoblue').css('background-color', 'green').one('click', function(e) {             $(this).css('background-color', 'blue'); // element clicked on           });         }, 3000);     }); }); 

the above basic example, there's issue it: "non-blue" dots won't react clicks @ all, randomly click until find them. instead you'd want bind click event handler all dots, , check if should turn blue (check presence of greentoblue class using .hasclass()).

you possibly add counter track number of guesses (so can limit them), , check if blue dots have been found have winning condition. that's more involved, basic principle same: bind one-time click event handler elements inside of function passed settimeout().

something instead:

$(selector dots).one('click', function(e) {     var $this = $(this);     if($this.hasclass('greentoblue')) {         $this.css('background-color', 'blue');     }     else {         $this.css('background-color', 'red');     } });