Javascript setTimeout с обещанием

Question

Мне нужно иметь в коде действия типа обещания, но я не знаю, как мне изменить свой код:

код

  scrollTo (id) {
    // add class to my DIV and scroll to it
    setTimeout(() => {
      var titleELe = document.getElementById(id);
      titleELe.classList.add('active');
      this.scrollMeElement.scrollToPoint(0, titleELe.offsetTop, 1000);
    }, 100);
    // remove that class from DIV
    setTimeout(() => {
      var titleELe = document.getElementById(id);
      titleELe.classList.remove('active');
    }, 600);
  };

Проблема

Проблема в что если мой целевой div (прокрученный до) находится рядом, все выглядит нормально, но если мой DIV находится далеко от текущей позиции до того, как мой процесс прокрутки будет завершен, класс будет удален из него, поэтому дизайн не будет выглядеть так красиво, как предполагалось to.

Что мне нужно, так это переместить мой код удаления класса после завершения прокрутки.

Logi c:

1. Добавьте класс и прокрутите до пункта назначения DIV
2. По завершении прокрутки удалите класс из пункта назначения DIV

Есть идеи по этому поводу?

Answer 1

Насколько я понимаю, scrollToPoint возвращает Promise<void> (https://ionicframework.com/docs/api/content).

Как насчет следующего простого решения?:

scrollTo(id) {
    var scrollDuration = 800;
    var titleELe = document.getElementById(id);

    titleELe.classList.add('active');

    this.scrollMeElement.scrollToPoint(0, titleELe.offsetTop, scrollDuration).then(() => {
      titleELe.classList.remove('active');
    });
};

Если вам нужно, чтобы функция была асинхронной c, вы также можете добавить внешнее обещание:

scrollTo(id) {
    return new Promise((resolve, reject) => {
        var scrollDuration = 800;
        var titleELe = document.getElementById(id);

        titleELe.classList.add('active');

        this.scrollMeElement.scrollToPoint(0, titleELe.offsetTop, scrollDuration).then(() => {
            titleELe.classList.remove('active');
            resolve();
        }, () => {
            reject();
        });
    });
};