Анимация построения дерева массива.
Здравствуйте, в 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> Ребят, куда копать? Верю в вас! |
Цитата:
|
Цитата:
|
структура массива анимация
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> |
рони,
В предоставленном Вами решении разложение подмассива происходит "задним числом". Особенно это заметно в конце, когда "5" уже вывелось, а только после хоть и в нужном месте отобразилось "410,411". |
Andreich1310,
не понимаю, что вам нужно. |
рони,
Порядок выведения: Конечный результат: |
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> |
Часовой пояс GMT +3, время: 00:36. |