Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.09.2020, 17:03
Аспирант
Отправить личное сообщение для win32s Посмотреть профиль Найти все сообщения от win32s
 
Регистрация: 28.09.2019
Сообщений: 38

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



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

Код:
checkbox1.onclick {
wait 5 second.
checkbox2.enabled = true;
...
checkbox9.click
wait 5 second.
checkbox10.enabled = true;
...
Но как это сделать по уму, т.е. как то связной список может или еще что? Посоветуйте.
Ответить с цитированием
  #2 (permalink)  
Старый 20.09.2020, 18:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

await checkbox
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>
Ответить с цитированием
  #3 (permalink)  
Старый 20.09.2020, 20:08
Аспирант
Отправить личное сообщение для win32s Посмотреть профиль Найти все сообщения от win32s
 
Регистрация: 28.09.2019
Сообщений: 38

Большое спасибо, именно то, что надо!
Ответить с цитированием
  #4 (permalink)  
Старый 21.09.2020, 00:26
Аспирант
Отправить личное сообщение для win32s Посмотреть профиль Найти все сообщения от win32s
 
Регистрация: 28.09.2019
Сообщений: 38

Есть еще вопрос - как правильно выполнить действия после того, как пользователь отметил флажки? Скажем, вывожу ему форму ввода. Число три тут для примера (три флажка), сугубо для теста.

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, поэтому не совсем понимаю эти механизмы, где там конец кода.
Ответить с цитированием
  #5 (permalink)  
Старый 21.09.2020, 08:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>

Последний раз редактировалось рони, 21.09.2020 в 09:38.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как передавать данные из html? carder Общие вопросы Javascript 5 27.02.2016 19:46
Как создается function Function(){} ? Cepairda Общие вопросы Javascript 0 10.02.2016 15:03
переманную как условие в if блок xas Общие вопросы Javascript 3 02.02.2016 21:17
initComponent: Как получить данные родителя и как получить store для вызова load()? Пролетарий ExtJS 76 04.07.2015 09:22
Как сделать что бы картинки с другого url отображались как свои zlodey Серверные языки и технологии 1 04.05.2015 21:30