title: Is setting interval right way to make sure Ajax call is completed?
body: <p>I have two input text field and one <kbd>save</kbd> button.</p>
  <pre><code>&lt;input type=&quot;text&quot; id=&quot;myInput&quot; /&gt;
  &lt;input type=&quot;text&quot; id=&quot;searchResult&quot;/&gt;
  &lt;button id=&quot;myButton&gt;save&lt;/button&gt;
  </code></pre>
  <p>The <code>myInput</code> text field has <strong>onchange event</strong> which then sends Ajax request to get some data and show the result to <code>searchResult</code> text field.</p>
  <p>The save button has <strong>click event</strong> which validate the input of <code>searchResult</code> text field for empty string and such. If ok then proceed with saving.</p>
  <pre><code>$(&quot;myInput&quot;).change(function() {
      var userInput = $(&quot;myInput&quot;).val(); //get value from the text field
      var responseText = callAjaxToGetData(userInput):  //XHR request to get some data
  
      $(&quot;searchResult&quot;).val( responseText ); //show the XHR result here
  
  });
  
  
  $(&quot;myButton&quot;).click(function() {
      var searchResultField = $(&quot;searchResult&quot;).val(); //get value from the searchResult field
      var isOK = validate(searchResultField);  //check empty string and such
  
      if(isOK) { saveDataViaAjax(userInput); }
  });
  </code></pre>
  <p><strong>Problem</strong></p>
  <p>When a user types in some text into the text field and then clicks on &quot;<code>save&quot;</code> button,</p>
  <ol>
  <li><p><code>onchange event</code> is triggered, <code>callAjaxToGetData()</code> is called. (XHR)</p>
  </li>
  <li><p>before <code>callAjaxToGetData()</code> is completed and fill in the <code>searchResult</code> text field, myButton <code>onclick event</code> is triggered.</p>
  </li>
  <li><p>In side of <code>onclick</code> event handler, validation fails because <code>searchResult</code> field is still empty.</p>
  </li>
  <li><p><code>callAjaxToGetData()</code> finally finishes and fill in <code>searchResult</code> text field.</p>
  </li>
  </ol>
  <p>Ideally, <code>callAjaxToGetData()</code> is completed first then proceed with the process inside of <code>onclick</code> event so the validation won't fail.</p>
  <p>This seems very common case people would face I guess so I'm wondering how you approach this problem?</p>
  <p>I am thinking to put interval into <code>onclick</code> event like below (this requires <code>responseText</code> to be a global variable)</p>
  <pre><code>$(&quot;myButton&quot;).click(function() {
  
     var interval = setInterval(function() { //call every 500ms
  
         //if responseText is not null that means i know the ajax inside of onchange event is completed for sure.
         if( responseText != null ) {
  
             clearInterval(interval);
  
             var searchResultField = $(&quot;searchResult&quot;).val(); //get value from the searchResult field
             var isOK = validate(searchResultField);  //check empty string and such
      
             if(isOK) { saveDataViaAjax(userInput); }
         }
     }, 500);  
  });
  </code></pre>