Обновление прогресса вручную

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

Создание уведомления с прогресс-баром

Для ручного управления прогрессом необходимо создать уведомление с опцией progressBar: true и включить closeWith: [], чтобы пользователь не мог закрыть уведомление до завершения операции:

let n = new Noty({
    text: 'Загрузка файла: 0%',
    type: 'info',
    timeout: false,
    progressBar: true,
    closeWith: [],
}).show();
  • timeout: false предотвращает автоматическое закрытие уведомления.
  • progressBar: true активирует визуальный индикатор прогресса.
  • closeWith: [] запрещает закрытие пользователем.

Обновление прогресса вручную

После создания уведомления прогресс можно обновлять с помощью метода setText и свойства progress уведомления. Для точного контроля используется объект Noty и его внутренний метод barDom, отвечающий за DOM-элемент прогресс-бара.

function updateProgress(notyInstance, percent) {
    notyInstance.setText(`Загрузка файла: ${percent}%`);
    notyInstance.barDom.style.width = `${percent}%`;
}
  • percent — значение прогресса в процентах (0–100).
  • setText обновляет текст уведомления.
  • barDom.style.width напрямую изменяет ширину прогресс-бара.

Автоматическая анимация прогресса вручную

Noty позволяет управлять прогрессом и создавать плавную анимацию через setInterval или requestAnimationFrame. Пример постепенного обновления:

let progress = 0;
let interval = setInterval(() => {
    if (progress >= 100) {
        clearInterval(interval);
        n.close();
    } else {
        progress += 5;
        updateProgress(n, progress);
    }
}, 200);
  • Каждые 200 мс значение увеличивается на 5%, пока не достигнет 100%.
  • После завершения прогресс-бара уведомление закрывается методом close().

Использование событий для синхронизации

Noty поддерживает события жизненного цикла уведомлений. Для ручного прогресса полезны следующие:

  • onShow — срабатывает при показе уведомления, можно инициализировать прогресс.
  • onClose — позволяет очистить интервалы или завершить асинхронные процессы.

Пример с синхронизацией с асинхронной загрузкой:

let n = new Noty({
    text: 'Загрузка...',
    type: 'info',
    timeout: false,
    progressBar: true,
    closeWith: [],
    callbacks: {
        onShow: () => startUpload(n),
        onClose: () => clearUpload()
    }
}).show();

function startUpload(notyInstance) {
    let progress = 0;
    let interval = setInterval(() => {
        progress += 10;
        updateProgress(notyInstance, progress);
        if (progress >= 100) clearInterval(interval);
    }, 300);
}

function clearUpload() {
    console.log('Процесс загрузки завершен');
}

Динамическое изменение текста и типа уведомления

При ручном прогрессе полезно менять не только ширину индикатора, но и текст или цвет уведомления:

if (progress < 50) {
    n.setType('info').setText(`Загрузка: ${progress}%`);
} else if (progress < 100) {
    n.setType('warning').setText(`Идёт обработка: ${progress}%`);
} else {
    n.setType('success').setText('Загрузка завершена');
}
  • setType позволяет менять цветовую схему уведомления (info, success, warning, error).
  • setText динамически отображает текущее состояние.

Советы по оптимизации

  1. Не использовать слишком короткие интервалы — слишком частое обновление DOM может снизить производительность.
  2. Закрывать уведомление после завершения — предотвращает зависание прогресс-бара.
  3. Сохранять ссылку на экземпляр Noty — без ссылки обновлять прогресс невозможно.
  4. Комбинировать с асинхронными событиями — например, для реальной загрузки файлов или обработки данных.

Применение с промисами и асинхронными функциями

Можно интегрировать ручное обновление прогресса с async/await для отображения состояния реальных процессов:

async function simulateUpload(notyInstance) {
    for (let i = 1; i <= 10; i++) {
        await new Promise(resolve => setTimeout(resolve, 300));
        updateProgress(notyInstance, i * 10);
    }
    notyInstance.close();
}

simulateUpload(n);
  • Асинхронная функция позволяет управлять прогрессом по мере выполнения операций.
  • Легко интегрируется с загрузкой файлов, запросами к серверу и обработкой данных на клиенте.

Эти приёмы обеспечивают полный контроль над прогресс-барами в Noty, позволяя создавать сложные визуальные уведомления с динамическим обновлением текста, типа и состояния прогресса.

Оглавление