title: Async ajax call causing browser to freeze
body: <p>I have two different sets of <code>a</code> and <code>p</code> elements in my html page which are made as <code>display:none</code> by default.</p>
  
  <p>At the end of the of the page I'm calling a function by sending their <code>ID</code>'s and some <code>values</code> to enable any one of them based on some conditions</p>
  
  <p>1st set</p>
  
  <pre><code> &lt;a style="display:none;" id="ClickMe1"&gt;Click Me&lt;/a&gt;
   &lt;p class="button" id="Sorry1" style="display:none;"&gt;Sorry!&lt;/p&gt;
  </code></pre>
  
  <p>2nd set</p>
  
  <pre><code> &lt;a style="display:none;" id="ClickMe2"&gt;Click Me&lt;/a&gt;
   &lt;p class="button" id="Sorry2" style="display:none;"&gt;Sorry!&lt;/p&gt;
  </code></pre>
  
  <p>Function call</p>
  
  <pre><code> &lt;script&gt;
          window.onload = function () {
             Initialize("ClickMe1", "Sorry1", "23,35");
             Initialize("ClickMe2", "Sorry2", "76,121");
          };
      &lt;/script&gt;
  </code></pre>
  
  <p>Initialize function consists of <code>a ID</code>, <code>p ID</code> and set of values(it can contain <code>n</code> values) to check which element to enable</p>
  
  <p>Javascript Function</p>
  
  <pre><code>function Initialize(ClickMeID, SorryID,Values) {
  var valList = Values.split(',');
      for (i = 0; i &lt; valList.length; i++) {
          var paramts = "{'val':'" + valList[i] + "'}";
          jQuery.ajax({
              type: "POST",
              url: "/services/MyService.asmx/GetData",
              data: paramts,
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              async: false,
              success: function (response) {
                  Status = response.d.toString();
              },
              error: function (response) {
  
              }
          });
              if (Status == "0") {
                      $('#' + SorryID).show();
                      return;
          }
      }
          $('#' + (ClickMeID).show();
  }
  </code></pre>
  
  <p>In my function I'm splitting the comma seperated <code>Values</code> and looping through each value and making an <code>ajax</code> call to my service with <code>async:false</code>.</p>
  
  <p>The response of success call is either <code>1</code> or <code>0</code>. If any of <code>Values</code> is <code>0</code> of a function call I want to display <code>p</code> element else <code>a</code> element of the sent <code>ID's</code>.</p>
  
  <p>This function is working fine but when the function call is raised this is making the <code>browser</code> freeze until the execution of the function.</p>
  
  <p>If I make <code>async: true</code> I'm not able to find out which set of buttons to enable and disable</p>
  
  <p>How can I make prevent the browser from freezing. </p>