С Новым годом! Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.78/9: Рейтинг темы: голосов - 9, средняя оценка - 4.78
0 / 0 / 4
Регистрация: 06.06.2014
Сообщений: 81

Асинхронное создание нескольких кнопок

27.10.2017, 11:04. Показов 1927. Ответов 11
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Подскажите пожалуйста, как используя promis создать несколько кнопок по нажатию на 1 кнопку с задержкой в 1 секунду.
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
27.10.2017, 11:04
Ответы с готовыми решениями:

Изменение состояния нескольких кнопок
Здравствуйте! Кому не сложно, подскажите, как можно сделать следующую вещь: есть 2 одинаковые кнопки на странице (одна вверху...

Открытие одного модульного окна с нескольких кнопок
Как сделать, что бы открывалось одно и то же окошко по нажатии на разные кнопки? вот мой JS, который для одной кнопки работает...

Несколько событий для нескольких кнопок
Скажите пожалуйста, каким образом создать несколько событий "mouseover" и т.п. для нескольких кнопок программно? Т.е. что бы не прописывать...

11
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
27.10.2017, 11:30
Использование промисов принципиально?
Без них: https://codepen.io/anon/pen/POYBaY
HTML5
1
<button onclick="createButtons()">Создать</button><br>
JavaScript
1
2
3
4
5
6
7
8
9
function createButtons() {
  setTimeout(function() {
    for (var i = 1; i <= 3; i++) {
      var newButton = document.createElement('button');
      newButton.innerHTML = 'Кнопка '+i;
      document.body.appendChild(newButton);
    }
  }, 1000);
}
1
0 / 0 / 4
Регистрация: 06.06.2014
Сообщений: 81
27.10.2017, 11:39  [ТС]
Цитата Сообщение от Balanaar Посмотреть сообщение
Использование промисов принципиально?
Да, сейчас просто пытаюсь разобраться с этим. Но, что-то не понимаю, как это реализовать.
0
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
27.10.2017, 12:10
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function createButtons() {
  var promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
      for (var i = 1; i <= 3; i++) {
        var newButton = document.createElement('button');
        newButton.innerHTML = 'Кнопка '+i;
        document.body.appendChild(newButton);
      }
      resolve('Кнопки созданы');
    }, 1000);
  });
  
  promise.then(function(msg) {
    alert(msg);
  });
}
1
0 / 0 / 4
Регистрация: 06.06.2014
Сообщений: 81
27.10.2017, 13:08  [ТС]
Цитата Сообщение от Balanaar Посмотреть сообщение
promise.then(function(msg) {
alert(msg);
});
Поясните пожалуйста, что это значит? (Что такое msg)
0
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
27.10.2017, 13:25
msg в данном случае аргумент функции resolve(), которая была вызвана на 9й строке.
0
Эксперт функциональных языков программированияЭксперт по математике/физике
4312 / 2104 / 431
Регистрация: 19.07.2009
Сообщений: 3,200
Записей в блоге: 24
28.10.2017, 10:30
Добавление-то всё равно синхронное.

Может, так?
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function CreateButton(caption) {
  return new Promise(function(resolve, reject) {
    try {
        var newButton = document.createElement('button');
        newButton.innerHTML = caption;
        document.body.appendChild(newButton);
    } catch(e) {
      reject({ error: e, caption: caption });
      return;
    }
    resolve(caption);
  });
}
 
function later(delay) {
    return new Promise(function(resolve) {
        setTimeout(resolve, delay);
    });
}
 
function ButtonCaption(i) {
  return 'Кнопка ' + i;
}
 
later(1000).then(function() { return Promise.all([1,2,3].map(ButtonCaption).map(CreateButton)); })
0
0 / 0 / 4
Регистрация: 06.06.2014
Сообщений: 81
30.10.2017, 08:15  [ТС]
Цитата Сообщение от Mysterious Light Посмотреть сообщение
Может, так?
В вашем случае кнопки сами создаются, без нажатия на кнопку. Но да вы правы, я бы хотел узнать как сделать, что бы после нажатия на кнопку создалось 3 кнопки по очереди с задержкой 1 секунду.
0
0 / 0 / 4
Регистрация: 06.06.2014
Сообщений: 81
31.10.2017, 15:44  [ТС]
Цитата Сообщение от Mysterious Light Посмотреть сообщение
Добавление-то всё равно синхронное.
Может, так?
Пожалуйста расскажите, что вы в этом коде сделали если не сложно. (и он у меня, как-то не работает. просто 3 кнопки сразу создаются без клика)
0
Эксперт функциональных языков программированияЭксперт по математике/физике
4312 / 2104 / 431
Регистрация: 19.07.2009
Сообщений: 3,200
Записей в блоге: 24
31.10.2017, 16:44
Цитата Сообщение от Furianec Посмотреть сообщение
и он у меня, как-то не работает. просто 3 кнопки сразу создаются без клика
У меня он после запуска добавляет через 1с три кнопки.
На всякий случай уточню, что, как Вы заметили ранее,
Цитата Сообщение от Furianec Посмотреть сообщение
кнопки сами создаются, без нажатия на кнопку.
Для того, чтобы кнопки создавались через 1с после нажатия на некую уже существующую кнопку, необходимо на последнюю повесить onclick равный
JavaScript
1
"later(1000).then(function() { return Promise.all([1,2,3].map(ButtonCaption).map(CreateButton)); })"
при условии, что все функции (ButtonCaption, CreateButton, later) определены, как в моём коде. Ну или создать функцию, как в коде Balanaar, с соответствующим содержанием.

Единственная функциональная особенность моего кода заключается в том, что каждая из трёх кнопок добавляется по-отдельности асинхронно, в то время как первый код добавляет все три кнопки вместе. Гипотетически, это может проявить себя, если атомарный процесс (добавление одной кнопки в примере) занимает существенное время и блокирует обновление интерфейса.
0
0 / 0 / 4
Регистрация: 06.06.2014
Сообщений: 81
31.10.2017, 18:39  [ТС]
Цитата Сообщение от Mysterious Light Посмотреть сообщение
У меня он после запуска добавляет через 1с три кнопки.
А как сделать, что бы они добавлялись по очереди с задержкой в 1 секунду?
0
Эксперт функциональных языков программированияЭксперт по математике/физике
4312 / 2104 / 431
Регистрация: 19.07.2009
Сообщений: 3,200
Записей в блоге: 24
31.10.2017, 18:53
Вы можете, например, написать функцию, которая вызывается асинхронно с задержкой 1с и которая добавляет одну кнопку и запускает другую такую же функцию асинхронно. Грубо говоря,
JavaScript
1
2
3
4
5
6
7
8
9
setTimeout(function() {
  document.body.appendChild(...); // добавление первой кнопки
  setTimeout(function() {
    document.body.appendChild(...); // добавление второй кнопки
    setTimeout(function() {
      document.body.appendChild(...); // добавление третьей кнопки
    }, 1000)
  }, 1000);
}, 1000)
если это Вам понятно, не должно вызвать проблем записать обещаниями.

Добавлено через 55 секунд
Вы пишите конкретнее, что именно Вы не понимаете. Так будет проще ответить.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
31.10.2017, 18:53
Помогаю со студенческими работами здесь

Создание нескольких кнопок в ряд
Здравствуйте! Столкнулся с такой проблемой: как правильно создать кнопки, а точнее их правильное позиционирование. Имеется такой макет:...

Создание нескольких кнопок с использованием цикла
нужно создать 9 кнопок, причем у каждой свой цвет и подпись ее номера с нумерацией легко: for(int i = 0; i &lt; 9; i++) { ...

Создание одной процедуры для нескольких кнопок через параметр
Доброго времени суток, комрады. Имеется у меня код, в нём для каждой кнопочки отведена своя процедурка, но требуют от меня, что бы для всех...

Асинхронное скачивание нескольких файлов с отображением прогресса
Уже несколько вечеров не могу устроить себе &quot;поочередное скачивание от 1 до 4 файлов с отображением прогресса&quot;, пробовал реализвоать...

Обработка нескольких кнопок
Всем привет, пытался найти в интернете что нибудь про комбинации клавиш, но находил только клавиши с контрол и т.д. Мне нужно...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
12
Ответ Создать тему
Новые блоги и статьи
Модель микоризы: классовый агентный подход
anaschu 02.01.2026
Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути
Programma_Boinc 01.01.2026
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост.
Programma_Boinc 28.12.2025
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / **********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / **********/ gallery/ bKBkQFf Пост отсюда. . .
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США.
Programma_Boinc 26.12.2025
Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка.
Programma_Boinc 23.12.2025
Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru