Заставляя пользователя справляться с диалогом во время выполнения проверки и ожидания в цикле? ⇐ Javascript

[Anonymous]

Когда пользователь нажимает кнопку в нижней части таблицы, чтобы добавить новый элемент, диалог встроен в функцию getDialogue и отображается, и скрипт ожидает значения кнопки, нажатой. Столбец значения таблицы для типа хардкодов T2. < /p>
Похоже, что он работает, но может ли он оставить невыполненные обещания накапливаться или есть более правильный /надежный /безопасный способ сделать это? class = "Snippet-Code-JS Lang-JS PrettyPrint-Override">

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

"use strict";
let
dialogue = document.querySelector('.dialogue'),
inputElem = dialogue.querySelector('input'),
tbody = document.querySelector('table tbody'),
promiseObj = Object.create(null, {
resolve: {
value: null,
writable: true
},
reject: {
value: null,
writable: true
}
})
;
document.querySelector('.newItem').addEventListener(
'mousedown',
async (evt) => {
if (dialogue.classList.contains('show')) return;
let dupName, msgResp, items, inputValue, type="t2";
items = tbody.querySelectorAll(`tr > td:nth-child(2).${type} + td`);
msgResp = await GetDialogue();
if (msgResp === "2" ) {
CloseDialogue();
return;
}
dupName = 1;
while (dupName) {
dupName = 0;
inputValue = inputElem.value.trim();
for (let e of items) {
if (e.textContent === inputValue) {
dupName=1;
break;
}
}
if (dupName) {
alert("Duplicate name");
let msgResp = await ResetDialogue();
if ( msgResp === "2" ) {
CloseDialogue();
return;
}
}
}
CloseDialogue();
},
false
);
dialogue.firstElementChild.lastElementChild.addEventListener(
'mousedown',
(evt) => {
let e = evt.target;
if ( !e.matches('button, button *') || !e.closest('button')) return;
promiseObj.resolve(e.value);
},
false
);
function GetDialogue() {
inputElem.value = "";
dialogue.classList.add('show');
return new Promise( (resolve, reject) => {
promiseObj.resolve = resolve;
promiseObj.reject = reject;
});
}
function CloseDialogue() {
dialogue.classList.remove('show');
}
function ResetDialogue() {
return new Promise( (resolve, reject) => {
promiseObj.resolve = resolve;
promiseObj.reject = reject;
});
}< /code>
* { box-sizing: border-box; }
.dialogue {
display:none;
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background-color: rgba(100,100,100,0.8);
}
.dialogue.show {
display: block;
}
.msgbox {
position: absolute;
top: 50px;
right: 0;
border: 1px solid black;
background-color: rgb(200,220,220);
width: fit-content;
padding: 15px;
}
p {
padding:0;
margin: 0;
}
input {
margin:10px 0;
width: 100%;
}
.btnbox {
display: flex;
justify-content: space-around;
}< /code>

KeyTypeValue

1T1a
2T1b
3T1c
4T1d
5T2A
6T2B
7T2C
8T2D


Add new item


Input new value:


ContinueCancel

Подробнее здесь: https://stackoverflow.com/questions/797 ... it-in-a-lo