Как установить минимальное время перезагрузки

Question

У меня есть приложение, которое выполняет асинхронные функции

Пример:

function openTypeNumberComponent(props) {
    setCountryCode(props)
    setSelectCountryView(false)
    setTypeNumberView(true)
}

Когда функция вызывается, состояние перезагружается и отображаются другие данные. Это выглядит иначе. Иногда это работает сразу, а иногда немного дольше

Я хотел бы отобразить индикатор (некоторая анимация)

Как заставить индикатор работать хотя бы 1 секунду? Если мне нужно больше времени, тогда больше, и если это делается быстрее, это должно продолжаться как минимум 1 секунду

Answer 1

Вот пример выполнения функции через 1 секунду, если вы хотите сделать это через 1 секунду, но я рекомендую вам добавить функцию обратного вызова, которая выполняется после загрузки игры и скрывает спиннер загрузки, потому что, возможно, ваша игра будет загружаться более чем через 1 секунду, учитывая низкий дебит подключения некоторых ваших пользователей, а также высокий дебет, поэтому это занимает менее секунды.

setTimeout(function() {
  document.querySelector(".fa-spinner").style.display = "none";
}, 1000);

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<i class="fa fa-spinner fa-spin" style="font-size: 30px"></i>

Answer 2

Простое решение: каждая асинхронная c функция добавляет к счетчику, а в случае успеха - уменьшает счетчик:

var loaderIndex = 0;

function toggleLoader(i) {
    loaderIndex += i;

    if (loaderIndex > 0) {
        loader.show();
    } else {
        loader.hide();
    }
}

function fooFunction() {
    toggleLoader(1);

    $.ajax({
        finnaly: () => toggleLoader(-1);
    });
}