title: Using javascript/jQuery, wait 3 seconds for click, then proceed
body: <p>I've been trying to figure out how to run an infinite loop while pausing for user click, then allow for a break out.</p>
  
  <p>When the loop starts, the user is presented with an image, and must choose the identical image from one of 4 displayed. If they successfully click the match within 5 seconds, they are presented another image, and the game goes on.
  If they either choose an incorrect image, or 5 seconds elapses, the game ends.</p>
  
  <p>I've got all of the functionality worked out, except this pause while waiting for a click or the time to expire.</p>
  
  <p>Ideally, I'd also like the time to be adjustable on each iteration. Say start at 5 seconds, then shorten the time slightly (10ms) on each loop.</p>
  
  <p>I believe it must be solvable using setTimeout() or setInterval(), but just can't wrap my head around it.</p>
  
  <p>Here is a minimal concept of what I'm trying to accomplish.</p>
  
  <pre><code>$('#playnow').on('click',function(){
      var speed = 5000;
      var speed_reduce = 10;
      var game_running = true;
  
      /* create array of images */
      var imgs = ['puppy.png','kitten.png','bunny.png','goldfish.png'];
  
      var runnow = setInterval(
          function(){
  
              //get random image from loaded theme
              rand_img = imgs[Math.floor(Math.random() * imgs.length) ];
  
              //display chosen image
              $('#goal_image').html('&lt;img src="'+theme_dir+rand_img+'" /&gt;');
  
              // wait up to 5 seconds for user to click or time to expire
              if(*clicked and matched*){
                  //get new random image and reset timer (less 10ms)
              }
              if(*time expired*){
                  //bail out and game ends
              }   
  
              /* reduce time */
              speed -= speed_reduce;
          },
      speed);
  
  });
  </code></pre>