Я бы сказал, что полагаться на модальное окно для отключения взаимодействия пользователя со страницей в большинстве случаев является ошибкой.
Правильным решением является независимая обработка «заблокированного» состояния и обработка показа / скрытия "пожалуйста, подождите ..." модальное окно как дополнительная возможность функции блокировки. Хорошая реализация такой функции должна позволять блокировку / разблокировку с отображением модального окна «пожалуйста, подождите» или без него.
Вот упрощенный принцип:
let pageLocked = false;
function toggleLockedState(state) {
pageLocked = state;
// a basic example would look like this:
$('body').toggleClass('isLocked', state);
$('#pleaseWaitModal').modal(state ? 'show' : 'hide' );
}
function pageLockingFunction() {
// lock page
toggleLockedState(true);
$.get( "your/get/url/here", function( data ) {
// do something with data
console.log(data);
// unlock page
toggleLockedState(false);
});
}
Преимущество этого подхода в что любая другая функция может запросить текущее значение pageLocked и, при необходимости, выйти или войти в заблокированное состояние. Кроме того, вышеизложенное упрощено. В реальной жизни управление состоянием приложения должно осуществляться специальным модулем / классом, который также предоставляет методы для прослушивания и реагирования на изменения состояния.
Возвращаясь к примеру, базовый c способ блокировки / разблокировки страница должна была бы добавить / удалить класс к элементу <body> (isLocked выше), применяя pointer-events: none ко всем элементам на странице - таким образом, отключая взаимодействия.
Помимо обработки блокировки страницы, ваша функция отображает / скрывает модальное окно загрузки, объясняя пользователям, что происходит (почему страница заблокирована).
В идеале, модальное окно также должно содержать кнопку «отменить загрузку», которая должна выйти из заблокированного состояния, чтобы они могли, для Например, попробуйте еще раз, если что-то пошло не так. Не забудьте установить pointer-events: all на кнопку отмены, чтобы пользователь мог взаимодействовать с ней, даже когда страница заблокирована.
Если вы хотите что-то сделать с данными после их загрузки, верните сам вызов из pageLockingFunction и верните data внутри возвращенного вызова:
function pageLockingFunction() {
toggleLockedState(true);
return $.get( "your/get/url/here", function( data ) {
toggleLockedState(false);
return data;
});
}
и используйте его так :
pageLockingFunction().then(data => {
console.log('closing #pleaseWaitModal...');
console.log(data);
}