Как продолжить выполнение функции, после того, как выполнится вложенная?

Question

[Arbitr]

Добрый вечер, Имеется код, который выводит диалоговое окно.

function showOptionWindow(parent, data) {
let existsOptionWindow = document.getElementById("optionWindow");
	if (existsOptionWindow)) {
		removeWindow(existsOptionWindow);
	}

	// обработка data

	let optionWindow = createWindow();
	showWindow(parent, optionWindow);
}

В коде вызывается функция showOptionWindow, которая обрабатывает данные и создает окно. При этом, если такое же окно уже есть, то скрывает его.

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

function showWindow(parent, elem) {
	let opacity = 0;
	let interval = setInterval(function () {

		if (opacity >= 1){
			clearInterval(interval);
		}
		else {
			opacity = opacity + 0.05;
		}
		parent.appendChild(elem);
		elem.style.opacity = opacity;
	},30);
	return elem;
}

function showWindow(parent, elem) {
	let opacity = 1;
	let interval = setInterval(function () {

		if (opacity <= 0){
			clearInterval(interval);
			elem.remove();
		}
		else {
			opacity = opacity - 0.05;
		}
		elem.style.opacity = opacity;
	},30);
	return elem;
}

Проблема в том, что если окно показано, то оно его закрывает и в то же время рисует другое. Нужно, чтобы showWindow начала работать после того, как произошла removeWindow, каким образом это можно сделать ?

Answer 1

[Ростислав Маккол]

async/await

Answer 2

[Никита Егоров]

У вас во первых обе функции называются showWindow, скорей всего опечатка, но все же.
Можно использовать async / await, то есть как то так:

async function removeWindow(parent, elem) {
    if (opacity <= 0){
      clearInterval(interval);
      elem.remove();
      return elem;
    }
    // code...
}

async function showWindow(parent, elem) {
    if (opacity >= 1){
      clearInterval(interval);
      return elem;
    }
    // code...
}

function showOptionWindow(parent, data) {
  new Promise(resolve => {
    if (existsOptionWindow)) {
      await removeWindow(existsOptionWindow);
      resolve();
    } else resolve();
  }).then(() => {
    let optionWindow = createWindow();
    showWindow(parent, optionWindow);
  });
  // code...
}

P.s я скорей всего где-то ошибся, пока не проверял.

Comments

[Arbitr]

Выдает ошибку await is only valid in async function в этом месте

[Никита Егоров]

Arbitr, а да, еще это:
async function showOptionWindow(parent, data) { }