title: Javascript wait for ajax success before code execution
body: <p>I'm trying to implement the following scenario on my web page:</p>
  
  <ol>
  <li>A user visits a page (note that users have a unique ID) </li>
  <li>The user must perform a task and then press the <code>next</code> button</li>
  <li>When the button is pressed, I look up in a database to see if it was the user's first visit</li>
  <li>If it was he must wait 60 seconds before he can press the button so I alert him</li>
  </ol>
  
  <p>I checked for solutions of similar synchronization problems:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/28718733/how-to-wait-for-ajax-success-handler-to-finish-before-executing-another">How to wait for ajax success handler to finish before executing another</a></li>
  <li><a href="https://stackoverflow.com/questions/19898041/waiting-for-ajax-call-before-code-runs-using-jquery">Waiting for AJAX call before code runs using jQuery</a></li>
  <li><a href="https://stackoverflow.com/questions/843058/javascript-synchronization-options">JavaScript synchronization options</a></li>
  </ul>
  
  <p>but couldn't really adapt them to my case. </p>
  
  <p>The following snippet gets executed every time the user presses the <code>next</code> button.</p>
  
  <pre><code>    // get timing for instruction reading
      var currentTime = new Date().getTime();
      totalTime = currentTime - startTime;
      console.debug("Time: " + totalTime);
      if (flag_instructions_pressed == false){
          $.ajax({
              url: "/IsNewUser/",
              type: "POST",
              contentType: "application/json",
              data: JSON.stringify({
                  "_user_id": _user_id,
              }),
              dataType: "text",
              success: function( returned_data ) {
                  _user_exp = parseInt(returned_data);
                  flag_instructions_pressed = true;
              }
          });
      }
  
      if ( totalTime &lt; 60000 &amp;&amp; _user_exp == 0) {
          alert("You have to wait 60 seconds");
          return;
      }
  </code></pre>
  
  <ul>
  <li>The <code>ajax</code> request will return a string with the number of previous visits of the user in question, and it should be executed only once for this session (cause it adds the user to the database). The result is stored in the global variable <code>_user_exp</code>.</li>
  </ul>
  
  <p>I have the following problem:</p>
  
  <blockquote>
    <p>Even if a user has visited the page multiple times he will still be shown the alert since the <code>if</code> statement is executed before the <code>success</code> function from the <code>ajax</code> request.</p>
  </blockquote>
  
  <p>How do I solve it?</p>
  
  <p><strong>NOTE 1:</strong> I cannot simply move the <code>if</code> statement into the <code>success</code> function because that should still be executed even after the <code>flag_instructions_pressed</code> is set to <code>true</code>. <code>flag_instructions_pressed</code> is just a flag initialized to <code>false</code> that gets set to <code>true</code> after the <code>ajax</code> request is performed. This prevents the request from happening again when the code is executed a second time.</p>
  
  <p><strong>NOTE 2:</strong> Obviously if I put an alert (or simply a timeout) before the <code>if</code> statement, everything works fine. But I think it is bad programming practice and would like to learn how to deal with this type of synchronization problems.</p>