ajax - Show jQuery Modal Progress Bar during getJSON load of data -

I am trying to present a modal dialog when loading my data. The flow looks like this:

  Show progress (); $ .ajaxSetup ({async: false}); LoadData (file); $ .ajaxSetup ({async: true}); RemoveProgressBar ();   
 I have also tried:  
  $ AjaxSetup ({async: false}); $ (Document) .jaxStart (function () {showProgressBar ();}); LoadData (file); $ .ajaxSetup ({async: true}); $ (Document) .ajaxStop (function () {removeProgressBar ();});   
 look like my work:  
  Show progress progress bar () {var thebody = d3.select ("body") .append (" Div "). .attr ("id", "progressDialog") .append ("div") .attr ("id", "etter" ("title", "processing") .attr ("class", "ui-widget-content uncollapsebox" , "Progress bar") .attr ("width", 200) .attr ("height", 20) $ (function () {$ ("#progressbar") .progressbar ({value: false});}); $ (Function () {$ ("#progress_Dialog") .dialog ({modal: true, closeOnEscape: false});}); } Delete the function () {$ ('# Pragatidhi'). Dialog ('off'); Deleting $ ('# ProgressDialog'). }   
 My load file looks like this:  
  function load data (nameofffile) {$ (function () {$ .getJSON ("... ", Function (data) {}). Error (function () {console.log ('error loading data!');});}); Console.log ("done with getJSON"); }   
 I have tried many forms, but either the model has not been shown or it has been shown and has not been removed or shown and I get an error: Error: Ways can not make calls on the dialog before starting; The method tried to call 'off' the show and remove functions work fine, when the console is called by itself.  
 P. s. I use async: false because I calculate my data just after the load and if I do not do this, then it does not wait to load all the data.   
 
 
 Unfortunately, if you set Ascend to false, then your browser is stable till AJAX query returns Will go If you want a reference signal like the progress bar, then you have to keep the async as true and call the  removeProgressBar  in the success of your AJAX call.