Как внедрить Preloader
Есть скрипт генерации чисел.
Когда выбираешь большое количество комбинаций, процесс генерации затягивается, что-бы обозначить процесс генерации появилась необходимость в Preloader.
Как его интегрировать в скрипт?
Можно средствами .gif анимации.
Можно CSS.
var tableEl;
function generate()
{
var myTable = document.getElementById("myTable"),
numbers = (new Array(25)).fill(1).map((a, i) => a + i),
result = [],
qnt = parseInt(document.getElementById('quantity').value, 10);
myTable.innerHTML = '';
tableEl = document.createElement("TABLE");
myTable.appendChild(tableEl);
while(result.length < qnt)
{
var left = shuffle(numbers).slice(0, 5).join('-'),
right = shuffle(numbers).slice(0, 5).join('-');
//чтобы не были равны между собой
if(left == right)
continue;
result.push([left, right]);
fillTableWithContent(left, right);
}
}
function shuffle(arr)
{
return arr.map(el => {
return {
item: el,
sort: Math.random()
}
}).sort((a, b) => a.sort - b.sort).map(el => el.item);
}
function fillTableWithContent(left, right)
{
var tr = tableEl.insertRow(tableEl.rows.length);
tr.insertCell(0).appendChild(document.createTextNode(left));
tr.insertCell(1).appendChild(document.createTextNode(right));
}tr > td:first-child { color:red; } tr > td:last-child { color:green; }<input id="quantity" type="text" placeholder="Кол-во комбинаций" style="background: #ffffff!important;color: #8f2d00!important;font-size: 20px!important;"/>
<input class="annoying-btn" type="button" value="Получить комбинации" onclick="generate()" />
<div id="myTable"></div>Познакомьтесь с асинхронностью JS. В этом случае вам нужна обобщённая функция, принимающая функцию generate и коллбек, который выполнится, когда закончится выполнение generate. До выполнения коллбека можете вставлять анимацию простыми манипуляциями с DOM. В коллбеке соответственно надо анимацию убрать и вставить результаты работы функции. Стоит помнить, что когда запускается длительный цикл, дальнейший код выполняется без остановки, поэтому установить прелоадер не сложно. Однако стоит обратить внимание на то что если ваш цикл выполняется долго - скорее всего ваш алгоритм работает не оптимально. Я не вижу в нем объем вычислений чтобы прелоадер вообще успел показаться.
P.S. Опровергая комментарии выше - природа JS асинхронна, потому блокировка интерфейса из-за этого цикла практически невозможна. https://developer.mozilla.org/ru/docs/Web/JavaScript/EventLoop#%D0%9D%D0%B8%D0%BA%D0%BE%D0%B3%D0%B4%D0%B0_%D0%BD%D0%B5_%D0%B1%D0%BB%D0%BE%D0%BA%D0%B8%D1%80%D1%83%D0%B5%D1%82%D1%81%D1%8F
Ниже пример реализации асинхронной функции
async function exec(loop, callback) {
const res = await loop()
if (res) {
callback(res)
} else {
callback(null, "Error")
}
}
function asyncLoop() {
console.log("Set preloader")
for (var i = 1; i <= 10000000; i++) {
if (i === 10000000-1) {
return i + " = result execution" // возрат результата
}
}
}
exec(asyncLoop, function(res, err){
console.log("Unset preloader")
if (err) {
console.log(err) // что в случае ошибки
} else {
console.log(res) // заполнение таблицы значениями
}
})
-
06:53
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
-
20:42
-
09:21
Основные этапы разработки сайта для стоматологической клиники
-
12:26
-
10:30
-
18:43
Продвижение своими сайтами как стратегия роста и независимости
-
22:46
-
06:18
-
12:23
- Почему SERVER_ADDR имеет не тот IP 50298 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 31941 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 26274 visits
- Как через css изменить цвет png изображения? 11764 visits
- Blob video url download 11307 visits
- Php curl запрос через прокси с авторизацией 10717 visits
- Работа с captcha vk api 9517 visits
© "hostciti.net" 15.3.2026 | 21:18