Javascript-форум - Анимация построения дерева массива.

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Анимация построения дерева массива. (https://javascript.ru/forum/dom-window/74896-animaciya-postroeniya-dereva-massiva.html)

Анимация построения дерева массива.

Здравствуйте, в 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

поочереди

setTimeout(function(){} , 200 * k)

Цитата:

Сообщение от рони (Сообщение 492742)

setTimeout(function(){} , 200 * k)

Время разложения подмассива неизвестно в связи с неопределенным количеством элементов, которые в свою очередь тоже могут быть массивами. Т.е. ни количество ни глубина неизвестны заранее

структура массива анимация

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>