Показать jQuery Modal Progress Bar во время загрузки данных getJSON

Question

Я пытаюсь представить модальное диалоговое окно, когда загружаю свои данные. Поток выглядит следующим образом:

showProgressBar(); 

$.ajaxSetup({ 
    async: false 
}); 

loadData(file); 

$.ajaxSetup({ 
    async: true 
}); 

removeProgressBar(); 

Я также попытался это:

$.ajaxSetup({ 
    async: false 
}); 

$(document).ajaxStart(function(){ 
showProgressBar(); 
}); 

loadData(file); 

$.ajaxSetup({ 
    async: true 
}); 

$(document).ajaxStop(function(){ 
    removeProgressBar(); 
}); 

Мои функции выглядит следующим образом:

function showProgressBar(){ 

    var theBody = d3.select("body") 
        .append("div") 
        .attr("title", "Processing") 
        .attr("class", "ui-widget-content uncollapsebox") 
        .attr("id", "progressDialog") 
        .append("div") 
         .attr("id", "progressbar") 
         .attr("width",200) 
         .attr("height",20) 

$(function() { 
    $("#progressbar").progressbar({ 
    value: false 
    }); 
}); 

$(function() { 
    $("#progressDialog").dialog({modal: true, 
            closeOnEscape: false 
            }); 
}); 

} 

function removeProgressBar(){ 
    $('#progressDialog').dialog('close'); 
    $('#progressDialog').remove(); 
} 

Мой файл загрузки выглядит следующим образом:

function loadData(nameOfFile){ 

    $(function(){ 
     $.getJSON("...",function(data){ 

     }).error(function(){ 
      console.log('error loading data!'); 
     }); 
    }); 
    console.log("done with getJSON"); 
} 

Я пробовал много вариантов, но e modal не отображается или отображается и не удаляется или отображается, а затем появляется сообщение об ошибке: Ошибка: невозможно вызвать методы в диалоге до инициализации; попытался вызвать метод «закрыть». Функции show и remove работают просто отлично, когда вызывается сами по себе, например. консоль.

p.s. Я использую async: false, потому что я вычисляю свои данные сразу после загрузки, и если я этого не делаю, это, конечно, не ждет, пока все данные будут загружены.

Answer 1

К сожалению, если вы установите асинхронное значение в false, ваш браузер замерзнет, ​​пока не вернется запрос ajax. Если вы хотите иметь контекстные подсказки, такие как индикатор выполнения, вам нужно сохранить асинхронный как истинный и вызвать removeProgressBar в обратном вызове успеха вашего вызова ajax.