Как заставить функцию ждать выполнения события click?

Question

[Let_peace]

Func();
function Func(){
	console.log('Func START');
	$('div').click(function(){
		console.log('Func MIDDLE');
	});
	console.log('Func END');
}

При вызове функции Func в консоли следующий результат:

Func START
Func END

Если нажать на div, то в консоли добавиться еще Func MIDDLE:

Func START
Func END
Func MIDDLE

Я не гуру JS, поэтому обращаюсь к экспертам за советом: как сделать так, чтобы Func сначала ждал выполнения события click, а только потом выполнялся последующий код ?
Т.е. хочется, чтобы результат был следующим:

Func START
Func MIDDLE
Func END

Answer 1

[0xD34F]

async function Func() {
  console.log('START');

  await new Promise(r => {
    $('div').one('click', () => (console.log('CLICK'), r()));
  });

  console.log('END');
}

Answer 2

[Владимир]

Обернуть в Promise и использовать async await как написал 0xD34F но есть одно но
Для того чтобы это работало, функцию Func делают асинхронной async function Func() { а это значит что она не возвращает результат, она возвращает Promise, который вам тоже нужно обрабатывать асинхронно.
Прежде чем лезть в асинхронщину, нужно понять что обратно оттуда вам не выбраться.

Хорошенько подумайте прежде чем спрашивать "как подождать результат колбека?"
https://habr.com/ru/company/mailru/blog/269465/
https://developer.mozilla.org/en-US/docs/Web/JavaS...