Как сделать кастомную задержку в setTimeout?

Question

[KononovD]

Доброго времени суток!

пытаюсь сделать объектно ориентированное модальное окно, что бы

• в html было только 2 дива: overlay и modal, а все остальное генерилось из js.
  
• параметры можно было передавать
  

все хорошо работает, как мне кажется, на костылях, но работает. хотел сделать плавное проявление и скрытие окна,
сделал следующее:
при появлении

this.overlay.style.display = "block";
		this.modal.style.display = "flex";

		setTimeout(() => {
			this.overlay.style.opacity = "1";
			this.modal.style.opacity = "1";
		}, 1); // без этой задержки не работает плавное появление

при удалении

this.overlay.style.opacity = "0";
this.modal.style.opacity = "0";

setTimeout(() => {
	this.overlay.style.display = "none";
	this.modal.style.display = "none";
}, this.fadeTime);
 /* если задержка указана так - то окно пропадает сразу,
 а если задержку указать явно (1000) - то через display:none случится только через 1 сек..*/

(transition так же задается, но в другом месте)
Так вот я не знаю почему setTimeout не хочет принимать this. поле и работать с ним.

Может есть смысл явно менять прозрачность через setInterval? и тогда заработает?
Еще думал использовать промисы, но я совсем не понял как их использовать, так что надо будет еще с промисами разобраться, прежде чем их использовать))

Спасибо за внимание

p.s. кому интересны мои костыли прошу:
https://codepen.io/Kononov_D/pen/rRwOBy?editors=1010

p.p.s за подсказки по оптимизации моего решения или "а лучше было бы сделать вот так, а не вот так" - буду очень благодарен!)

Answer 1

[Алексей Шевченко]

Мне кажется, что тут ошибка в scope. В этом блоке в this просто нет fadeTime

Comments

[KononovD]

т.к. стрелочная функция не имеет контекста, а контекст метода класса - и есть сам класс - this.fadeTime ссылается на поле, которое создается в конструкторе, поэтому в этом блоке есть this.fadeTime)

[KononovD]

Там и правда была ошибка "невнимательности"
я сначала подставлял this.fadeTime и выводил его в консоль, видел там 2, 1 и 0.5, а потом ставил 1000 и все работало, а я все еще не понимал почему это 2 секунды не работают как 2000 мс)))
бывает)