Как внедрить 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) // заполнение таблицы значениями
}
})
-
13:29
Кофе для программистов: как напиток влияет на продуктивность кодеров?
-
22:13
Рекламные вывески: как привлечь внимание и увеличить продажи
-
19:13
-
16:04
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
-
17:27
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
-
22:17
-
18:08
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
-
18:54
-
17:35
- Почему SERVER_ADDR имеет не тот IP 47913 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30567 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23900 visits
- Как через css изменить цвет png изображения? 10400 visits
- Blob video url download 10004 visits
- Php curl запрос через прокси с авторизацией 9278 visits
- Работа с captcha vk api 8147 visits
© "hostciti.net" 26.3.2025 | 00:14