Работа с промисами

Smooth Scroll — это библиотека для плавной прокрутки страницы к определённым элементам. В современном JavaScript взаимодействие с асинхронными событиями часто строится на промисах. В контексте Smooth Scroll промисы позволяют контролировать завершение анимации и выполнять действия после её окончания.

Инициализация Smooth Scroll

Для начала необходимо создать экземпляр Smooth Scroll, передав ему селектор ссылок и объект с настройками:

import SmoothScroll from 'smooth-scroll';

const scroll = new SmoothScroll('a[href*="#"]', {
  speed: 600,         // продолжительность анимации в миллисекундах
  offset: 50,         // смещение от верхнего края окна
  easing: 'easeInOutCubic', // функция сглаживания
});

Ключевые параметры:

  • speed — задаёт скорость прокрутки.
  • offset — позволяет учесть фиксированные элементы, например, шапку сайта.
  • easing — определяет кривую анимации, влияет на плавность движения.

Промисы в Smooth Scroll

Smooth Scroll предоставляет метод animateScroll, который возвращает промис. Этот промис разрешается, когда анимация завершена.

scroll.animateScroll(document.querySelector('#section2'))
  .then(() => {
    console.log('Прокрутка завершена');
  })
  .catch(error => {
    console.error('Ошибка при прокрутке:', error);
  });

Особенности использования промисов:

  • .then() вызывается после успешного завершения анимации.
  • .catch() ловит возможные ошибки, например, если целевой элемент не найден.
  • Промисы позволяют строить цепочки асинхронных действий, например, запуск анимации, а затем подгрузку контента.

Использование async/await с Smooth Scroll

Промисы библиотеки Smooth Scroll можно использовать вместе с синтаксисом async/await, что делает код более читаемым и последовательным:

async function scrollToSection() {
  try {
    await scroll.animateScroll(document.querySelector('#section3'));
    console.log('Анимация завершена, теперь можно выполнить следующий код');
  } catch (error) {
    console.error('Ошибка при прокрутке:', error);
  }
}

scrollToSection();

Преимущества async/await:

  • Код читается сверху вниз, без вложенных .then() цепочек.
  • Легче обрабатывать ошибки через try/catch.
  • Удобно сочетать с другими асинхронными функциями, например, с fetch для загрузки данных после прокрутки.

Цепочки анимаций

Промисы позволяют запускать несколько анимаций последовательно:

scroll.animateScroll(document.querySelector('#section1'))
  .then(() => scroll.animateScroll(document.querySelector('#section2')))
  .then(() => scroll.animateScroll(document.querySelector('#section3')))
  .catch(error => console.error('Ошибка в цепочке прокруток:', error));

Используя async/await, цепочка выглядит ещё чище:

async function scrollThroughSections() {
  try {
    await scroll.animateScroll(document.querySelector('#section1'));
    await scroll.animateScroll(document.querySelector('#section2'));
    await scroll.animateScroll(document.querySelector('#section3'));
  } catch (error) {
    console.error('Ошибка при последовательной прокрутке:', error);
  }
}

scrollThroughSections();

Обработка пользовательских событий с промисами

Можно связывать промисы Smooth Scroll с событиями DOM, например, кликами на кнопки:

document.querySelector('#btn-scroll').addEventListener('click', async () => {
  try {
    await scroll.animateScroll(document.querySelector('#target-section'));
    console.log('Прокрутка по кнопке завершена');
  } catch (error) {
    console.error('Ошибка при прокрутке по кнопке:', error);
  }
});

Настройка отмены прокрутки

Smooth Scroll позволяет остановить анимацию вручную с помощью метода cancelScroll. Промисы помогут корректно обработать этот случай:

const promise = scroll.animateScroll(document.querySelector('#section4'));

setTimeout(() => {
  scroll.cancelScroll();
}, 300);

promise
  .then(() => console.log('Анимация завершилась без отмены'))
  .catch(error => console.log('Анимация была отменена', error));

Интеграция с другими асинхронными действиями

Промисы позволяют объединять Smooth Scroll с загрузкой данных, анимациями элементов или отслеживанием состояния:

async function scrollAndLoad() {
  try {
    await scroll.animateScroll(document.querySelector('#section5'));
    const response = await fetch('/api/data');
    const data = await response.json();
    console.log('Данные загружены после прокрутки:', data);
  } catch (error) {
    console.error('Ошибка при прокрутке или загрузке данных:', error);
  }
}

Вывод: использование промисов в Smooth Scroll открывает возможности для точного управления анимацией, последовательного выполнения действий и интеграции с асинхронными процессами JavaScript. Это обеспечивает гибкость и чистоту кода, особенно при сложных сценариях пользовательского взаимодействия.

Оглавление