title: Jquery $.Ajax Freezes Browser
body: <p>I have a function that makes a call that gets a Json Response and plots the data inside Google Plots... I do this function every 90 seconds so it updates my charts with the latest data....</p>
  
  <p>This works great however whenever it is processing it seems to lock up the browser for a brief few seconds (even the loader freezes) I am okay if the graph part freezes but I do not want the Loader or other items to freeze I want the UI to still function while the graphs update.</p>
  
  <p>Can someone help me maybe I should change the $.ajax</p>
  
  <p>Here is the code:</p>
  
  <pre><code>function UpdateCharts() {
  clearInterval(timerId);
  BuildLineChart('power-chart', $('#datePower').val(), '1,28,32');
  BuildLineChart('voltagecurrent-chart', currentDate, '13,15,17,5,7,9');
  BuildLineChart('phasekw-chart', currentDate, '2,3,4');
  BuildLineChart('phasevoltage-chart', currentDate, '13,15,17');
  BuildLineChart('phasecurrent-chart', currentDate, '5,7,9,11');
  timerId = setInterval(UpdateCharts, 90000);
  }
  
  
  // document ready function
  $(document).ready(function() {
  setTimeout(UpdateCharts, 5000);
  });
  </code></pre>
  
  <p>Build line chart then does this:</p>
  
  <pre><code> function onDataReceived(seriesData) {
              var p = $.plot(placeholder, seriesData.seriesData, options);
          }
  
          $.ajax({
              url: '/Charts/LineChart?SeriesToGraph=' + dataPoints + '&amp;DatePull=' + chartDate,
              method: 'GET',
              async: false,
              cache: true,
              dataType: 'json',
              beforeSend: function() {
              $("." + placeHold + "-loader").html('&lt;img src="/Assets/images/loaders/circular/066.gif" /&gt;');
              },
              complete: function() {
              $("." + placeHold + "-loader").html('');
              },
              success: onDataReceived
          });
  </code></pre>