14.08.2018, 23:07
|
|
Новичок на форуме
|
|
Регистрация: 14.08.2018
Сообщений: 4
|
|
|
Анимация построения дерева массива.
Здравствуйте, в JS новичок. Притом, пока знаю только "голый".
Возникла потребность разложить массив
var arr = [0,1,[20,21,22,23],3,[40,[410,411],42],5];
В такую форму:
0
1
20,21,22,23
-20
-21
-22
3
40,410,411,42
-40
-410,411
--410
--411
- 42
5
Вроде бы получилось. Потребовалось визуализировать процесс разложения. Т.е.создать анимацию в которой поочереди будет отображаться новый элемент. Вот тут-то я и застрял. Вроде как это и есть "асинхронность"  А вот как ее победить - всю голову сломал.
Вот собственно мой "код" :
<script>
var arr = [0,1,[20,21,22,23],3,[40,[410,411],42],5];
var l="";
function f(x,i) {
if (i<x.length) {
l+=x[i]+"<br>";
p.innerHTML=l;
if (x[i].length) {
f(x[i],0);
}
i++;
setTimeout (function () {
f(x,i);
}
,100);
}
}
setTimeout (function () {
f(arr,0);
}
,200);
</script>
Ребят, куда копать? Верю в вас! |
|
15.08.2018, 07:11
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,127
|
|
|
Сообщение от Andreich1310
|
|
поочереди
|
setTimeout(function(){} , 200 * k) |
|
15.08.2018, 07:59
|
|
Новичок на форуме
|
|
Регистрация: 14.08.2018
Сообщений: 4
|
|
Сообщение от рони
|
|
setTimeout(function(){} , 200 * k)
|
Время разложения подмассива неизвестно в связи с неопределенным количеством элементов, которые в свою очередь тоже могут быть массивами. Т.е. ни количество ни глубина неизвестны заранее |
|
15.08.2018, 10:18
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,127
|
|
|
структура массива анимация
Andreich1310,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.hot{
display: flex;
color: #0000FF;
font-size: 24px;
margin-top: 25px;
}
.hot:before{
content: "[";
color: #FF0000;
font-size: 32px;
}
.hot:after{
content: "]";
color: #FF0000;
font-size: 32px;
}
</style>
</head>
<body>
<div class="test"></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
var arr = [0, 1, [20, 21, 22, 23], 3, [40, [410, 411], 42], 5],
parent = document.querySelector(".test"),
k = 0;
function fn(arr, parent, k) {
parent.classList.add("hot");
arr.forEach(function(el, i) {
k += 800;
if (typeof el == "object") window.setTimeout(function() {
var clone = parent.cloneNode();
parent.appendChild(clone);
if (arr.length > ++i) parent.appendChild(document.createTextNode(","));
fn(el, clone, 0)
}, k - 100);
else window.setTimeout(function() {
parent.appendChild(document.createTextNode(el));
if (arr.length > ++i) parent.appendChild(document.createTextNode(","))
}, k)
})
}
fn(arr, parent, k)
});
</script>
</body>
</html>
|
|
15.08.2018, 20:58
|
|
Новичок на форуме
|
|
Регистрация: 14.08.2018
Сообщений: 4
|
|
|
рони,
В предоставленном Вами решении разложение подмассива происходит "задним числом".
Особенно это заметно в конце, когда "5" уже вывелось, а только после хоть и в нужном месте отобразилось "410,411".
|
|
15.08.2018, 21:02
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,127
|
|
|
Andreich1310,
не понимаю, что вам нужно.
|
|
15.08.2018, 21:37
|
|
Новичок на форуме
|
|
Регистрация: 14.08.2018
Сообщений: 4
|
|
рони,
Порядок выведения:
Конечный результат:
Последний раз редактировалось Andreich1310, 15.08.2018 в 21:50.
|
|
15.08.2018, 22:48
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,127
|
|
Andreich1310,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.test{
font-size: 36px;
}
</style>
</head>
<body>
<div class="test"></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
var arr = [0, 1, [20, 21, 22, 23], 3, [40, [410, 411], 42], 5],
parent = document.querySelector(".test"),
k = [0];
function fn() {
for (var b = arr, a = 0; a < k.length; a++) b = b[k[a]];
void 0 == b ? (k.pop(), k.length && k[k.length - 1]++ && fn()) : window.setTimeout(function() {
var a = document.createElement("div");
a.appendChild(document.createTextNode(b));
parent.appendChild(a);
a.style.marginLeft = 40 * (k.length - 1) + "px";
"object" == typeof b ? k.push(0) : k[k.length - 1]++;
fn()
}, 800)
};
fn()
});
</script>
</body>
</html>
Последний раз редактировалось рони, 15.08.2018 в 23:08.
|
|
|
|
