Т.к. ajax
- асинхронная операция, то она может длиться и 2 секунды и 22 секунды, хотя в это время может и страницу прогрузиться и пользователь что-то понажимать.
Если я правильно разглядел, то никакая работа не предполагается, пока не будет загружен json
. Отсюда есть минимум один выход: вешать картинку "loading" перед запросом и убирать после получения ответа. Можно это сделать на весь экран, чтоб пользователь ничего не трогал.
let test = null;
$.ajax({
url: 'http://atom-web.github.io/wattson/style-components/sity.json',
beforeSend: function( xhr ) {
// Здесь включаем какой-то loader.gif чтобы дать пользователю понять,
// что идёт загрузка данных
},
success: function(data){
test = data;
// Здесь выключаем loader.gif и разблокируем элементы,
// чтобы пользователь мог начать работать
},
});
Также можно обратить внимание на async/await
функции, что позволит дождаться загрузки аякса и тоже выполнять функции далее.