Async/await поможете?

Question

[Дмитрий Марков]

Как я могу с помощью async/await подождать окончание анамации и вернуть значение которое переопределяется в callback animejs??

Вырезал 2 функции из класса. Могу скинуть весь код, если нужно.

async showModal() {
		this.bodyOpenModal();
		let data = "action=product&id="+this.params.post_id;
		let result = await this.makeRequest('POST', window.adminAjaxUrl, data);
		this.params.body.innerHTML = result;

		this.params.modal.style['display'] = 'block';
		this.params.modalContent.style['opacity'] = 0;

		anime({
			targets		: this.params.modal,
			opacity		: [0, 1],
			duration	: 300,
			easing		: 'linear',
			complete	: async event => {
				this.params.modal.classList.add('opened');
				window.custom_resize();
				let completeAnimationBody = await this.showModalContent()
				console.log( completeAnimationBody )
			}
		})
	}

	async showModalContent() {
		let status = false;

		await anime({
			targets		: this.params.modalContent,
			opacity		: [0, 1],
			translateY	: [-100, 0],
			duration	: 200,
			easing		: 'linear',
			complete	: () => {
				status = true
			}
		})
Вот здесь нужно что бы status был true
		return status
	}

Answer 1

[Владимир Мальков]

Если вы хотите засинхронить что-то асинхронное, нужно обернуть функционал в promise и await'ить его:

await new Promise(resolve => {
  anime({
    complete: () => { resolve() }
  })
})

Comments

[Aetae]

await new Promise(complete => anime({
  complete 
}));

Понаставят скобочек, понимаешь.)

[Владимир Мальков]

Aetae, каюсь, вечер пятницы...

[Дмитрий Марков]

Исправил код на

async showModal() {
		this.bodyOpenModal();
		let data = "action=product&id="+this.params.post_id;
		let result = await this.makeRequest('POST', window.adminAjaxUrl, data);
		this.params.body.innerHTML = result;

		this.params.modal.style['display'] = 'block';
		this.params.modalContent.style['opacity'] = 0;

		anime({
			targets		: this.params.modal,
			opacity		: [0, 1],
			duration	: 300,
			easing		: 'linear',
			complete	: async event => {
				this.params.modal.classList.add('opened');
				window.custom_resize();
				let completeAnimationBody = await this.showModalContent()
			}
		})
	}

	async showModalContent() {
		return await new Promise(resolve => {
			anime({
				targets		: this.params.modalContent,
				opacity		: [0, 1],
				translateY	: [-100, 0],
				duration	: 200,
				easing		: 'linear',
				complete	: () => {
					resolve(true)
				}
			})
		})
	}

Но теперь я не понимаю как проверить что он ждёт

[Дмитрий Марков]

Вопрос снимается)) Разобрался

[Aetae]

En-Tilza,

ждёт = true;
let completeAnimationBody = await this.showModalContent();
ждёт = false;

Или что. Непонятен вопрос.