Вход

Просмотр полной версии : Включать флажки по очереди, как?

win32s
20.09.2020, 17:03
На хабре, когда постишь новый топик, нужно согласиться с правилами. Там идут флажки, нажимать надо каждый по очереди, причем есть таймаут (т.е. прочитал 5 секунд - нажал, следующий стал доступным).

https://i112.fastpic.ru/big/2020/0920/0a/5f9448360d3fcdd76a2a0ce41a26280a.png (https://fastpic.ru/view/112/2020/0920/5f9448360d3fcdd76a2a0ce41a26280a.png.html)

Как заполнил все - можно постить. Вопрос - как такое сделать? Я вижу решение "в лоб", т.е. на каждый флажок сделать обработчик, написать свою функцию. Вида (псевдокот):

checkbox1.onclick {
wait 5 second.
checkbox2.enabled = true;
...
checkbox9.click
wait 5 second.
checkbox10.enabled = true;
...

Но как это сделать по уму, т.е. как то связной список может или еще что? Посоветуйте.
рони
20.09.2020, 18:02
win32s,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
input[type="checkbox"] {
width:19px;
height:19px;
}
</style>


</head>

<body>
<input type="checkbox" name="" disabled="disabled">
<input type="checkbox" name="" disabled="disabled">
<input type="checkbox" name="" disabled="disabled">
<input type="checkbox" name="" disabled="disabled">
<input type="checkbox" name="" disabled="disabled">
<script>
async function mouseClick(el) {
return new Promise(resolve => el.onclick = () => setTimeout(resolve, 5000));
}

(async function main() {
for(const el of document.querySelectorAll('[type="checkbox"]')) {
el.removeAttribute('disabled');
await mouseClick(el);
}
})();

</script>
</body>
</html>
win32s
20.09.2020, 20:08
Большое спасибо, именно то, что надо!
win32s
21.09.2020, 00:26
Есть еще вопрос - как правильно выполнить действия после того, как пользователь отметил флажки? Скажем, вывожу ему форму ввода. Число три тут для примера (три флажка), сугубо для теста.

var cnt = 0;

async function mouseClick(el)
{
return new Promise(resolve =>
el.onclick = () => {
//console.log(el);
el.disabled = true;

cnt++;
if (cnt < 3)
{ setTimeout(resolve, 1000); }
else
{ console.log("fin"); }
}
);
}

(async function main()
{
for(const el of document.querySelectorAll('[type="checkbox"]'))
{
el.removeAttribute('disabled');
await mouseClick(el);
}
main().then(console.log("FIN")) ;
})();

Какой из вариантов правильный , где в main или в обработке клика ? Никогда раньше не работал ни с промисами, ни с async await, поэтому не совсем понимаю эти механизмы, где там конец кода.
рони
21.09.2020, 08:32
win32s,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
input[type="checkbox"] {
width:19px;
height:19px;
}
.fin {
transform: scale(0);
margin: 0 auto;
text-align: center;
font-size: 3em;
}
.fin.open{
transition: 1s;
transform: scale(1);
}

</style>


</head>

<body>
<input type="checkbox" name="" disabled="disabled">
<input type="checkbox" name="" disabled="disabled">
<input type="checkbox" name="" disabled="disabled">
<input type="checkbox" name="" disabled="disabled">
<input type="checkbox" name="" disabled="disabled">
<div class="fin">fin</div>
<script>
async function mouseClick(el, delay) {
return new Promise(resolve => el.onclick = () => {
el.setAttribute('disabled', 'disabled');
setTimeout(resolve, delay)
});
}
const checkboxs = document.querySelectorAll('[type="checkbox"]'),
fin = document.querySelector('.fin');
let {length} = checkboxs;

(async function main() {
for(const el of document.querySelectorAll('[type="checkbox"]')) {
el.removeAttribute('disabled');
let delay = --length ? 5000 : 0;
await mouseClick(el, delay);
}
fin.classList.add('open');
})();

</script>
</body>
</html>