Может ли заявление о обещании разрешить ожидание возврата от функции в ожидании обещания? ⇐ Javascript

[Anonymous]

В этом примере код кнопка Showmenu запрашивает своего рода пользовательское контекстное меню, которое возвращает обещание, ожидающее, чтобы пользователь сделает выбор из меню. Когда меню запрашивается, передается занятость, указывающий, следует ли заблокировать другие события до завершения работы меню. Тем не менее, BushyHandler закончится ожиданием до завершения OptionHandler; И я думаю, что это потому, что все, что делает SelectionHandler, разрешает обещание, и, по -видимому, это не то, что можно ожидать. Я не хочу, чтобы SelectionHanlder вернулся к ожиданию BusyHandler до тех пор, пока не завершится установленное время в OptionHandler. Спасибо. class = "Snippet-Code-JS Lang-JS PrettyPrint-Override">

Код: Выделить всё

let
showMenu = document.querySelector(".showMenu"),
menu = document.querySelector(".menu"),
mapObj = Object.create(null)
;
mapObj.busyType = '';
mapObj.busyState = 0;
showMenu.addEventListener('mousedown', OptionHandler, false);
menu.addEventListener('mousedown',BusyHandler, false);
async function OptionHandler() {
let option = await MenuHandler('b');
console.log(option);
let d = Date.now();
console.log(`Work began at ${d}`);
let p = new Promise( (resolve,reject) => {
setTimeout( () => {resolve('delay resolved');}, 2000);
});
await p;
console.log(`Work completed at ${Date.now()-d}`);
}
function MenuHandler(busyType) {
menu.classList.add('show');
mapObj.busyType = busyType;
return new Promise( (resolve, reject) => {
// mapObj.resolve = resolve;
// mapObj.reject = reject;
mapObj.resolve = async function (v) {resolve(v)};
mapObj.reject = async function (v) {reject(v)};
});
}
async function SelectionHandler(evt) {
let e = evt.target;
if (
!e.matches('.menu button, .menu button *')
|| !(e = e.closest('button')) ) return;
menu.classList.remove('show');
await mapObj.resolve(e.value);

}
async function BusyHandler(evt) {
if ( mapObj.busyType === 'b' ) {
if ( mapObj.busyState === 1) return;
mapObj.busyState = 1;
await SelectionHandler(evt);
console.log("BusyHandler done waiting");
mapObj.busyState= 0;
} else {
SelectionHandler(evt);
}
}< /code>
.menu {
display: none;
border: 1px solid black;
padding: 10px;
flex-flow: column;
width: fit-content;
}
.menu.show {
display: flex;
}
button {
margin: 5px;
}< /code>
Show Menu

Option 1
Option 2
< /code>
< /div>
< /div>
< /p>

Добавил этот второй пример, чтобы проиллюстрировать, что я думаю, второе предложение @bergi.  Похоже, он работает, и BusyHandler теперь ждет, пока OptionHandler не завершит свою работу.let
showMenu = document.querySelector(".showMenu"),
menu = document.querySelector(".menu"),
busyObj = Object.create(null),
mapObj = Object.create(null)
;
busyObj.busyType = '';
busyObj.busyState = 0;
busyObj.promise = null;
busyObj.resolve = null;
busyObj.reject = null;
showMenu.addEventListener('mousedown', OptionHandler, false);
menu.addEventListener('mousedown',BusyHandler, false);
async function OptionHandler() {
let option = await MenuHandler('b');
console.log(option);
let d = Date.now();
console.log(`Work began at ${d}`);
let p = new Promise( (resolve,reject) => {
setTimeout( () => {resolve('delay resolved');}, 2000);
});
await p;
console.log(`Work completed at ${Date.now()-d}`);
busyObj.resolve();
}
function MenuHandler(busyType) {
menu.classList.add('show');
busyObj.busyType = busyType;
busyObj.promise = new Promise( (resolve,reject) => {
busyObj.resolve = resolve;
busyObj.reject = reject;
});
return new Promise( (resolve, reject) => {
mapObj.resolve = resolve;
mapObj.reject = reject;
});
}
function SelectionHandler(evt) {
let e = evt.target;
if (
!e.matches('.menu button, .menu button *')
|| !(e = e.closest('button')) ) return;
menu.classList.remove('show');
mapObj.resolve(e.value);

}
async function BusyHandler(evt) {
if ( busyObj.busyType === 'b' ) {
if ( busyObj.busyState === 1) return;
busyObj.busyState = 1;
SelectionHandler(evt);
await busyObj.promise;
console.log("BusyHandler done waiting");
busyObj.busyState= 0;
} else {
SelectionHandler(evt);
}
}< /code>
.menu {
display: none;
border: 1px solid black;
padding: 10px;
flex-flow: column;
width: fit-content;
}
.menu.show {
display: flex;
}
button {
margin: 5px;
}< /code>
Show Menu

Option 1
Option 2

Подробнее здесь: https://stackoverflow.com/questions/796 ... ing-the-pr