Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.08.2018, 23:07
Новичок на форуме
Отправить личное сообщение для Andreich1310 Посмотреть профиль Найти все сообщения от Andreich1310
 
Регистрация: 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>


Ребят, куда копать? Верю в вас!
Ответить с цитированием
  #2 (permalink)  
Старый 15.08.2018, 07:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,429

Сообщение от Andreich1310
поочереди
setTimeout(function(){} , 200 * k)
Ответить с цитированием
  #3 (permalink)  
Старый 15.08.2018, 07:59
Новичок на форуме
Отправить личное сообщение для Andreich1310 Посмотреть профиль Найти все сообщения от Andreich1310
 
Регистрация: 14.08.2018
Сообщений: 4

Сообщение от рони Посмотреть сообщение
setTimeout(function(){} , 200 * k)
Время разложения подмассива неизвестно в связи с неопределенным количеством элементов, которые в свою очередь тоже могут быть массивами. Т.е. ни количество ни глубина неизвестны заранее
Ответить с цитированием
  #4 (permalink)  
Старый 15.08.2018, 10:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,429

структура массива анимация
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 (permalink)  
Старый 15.08.2018, 20:58
Новичок на форуме
Отправить личное сообщение для Andreich1310 Посмотреть профиль Найти все сообщения от Andreich1310
 
Регистрация: 14.08.2018
Сообщений: 4

рони,
В предоставленном Вами решении разложение подмассива происходит "задним числом".
Особенно это заметно в конце, когда "5" уже вывелось, а только после хоть и в нужном месте отобразилось "410,411".
Ответить с цитированием
  #6 (permalink)  
Старый 15.08.2018, 21:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,429

Andreich1310,
не понимаю, что вам нужно.
Ответить с цитированием
  #7 (permalink)  
Старый 15.08.2018, 21:37
Новичок на форуме
Отправить личное сообщение для Andreich1310 Посмотреть профиль Найти все сообщения от Andreich1310
 
Регистрация: 14.08.2018
Сообщений: 4

рони,


Порядок выведения:



Конечный результат:

Последний раз редактировалось Andreich1310, 15.08.2018 в 21:50.
Ответить с цитированием
  #8 (permalink)  
Старый 15.08.2018, 22:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,429

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.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Обход многомерного массива с задержкой после каждого цикла Walk Общие вопросы Javascript 2 14.08.2017 16:17
Анимация сортировки массива LunarionXIV jQuery 3 25.05.2016 01:20
Онлайн-сервис построения дерева на javascript kiberlain Общие вопросы Javascript 1 08.05.2013 17:30
Анимация массива с элементами, и вызов функции по завершению. Broken jQuery 5 30.08.2012 19:35
Анимация сортировки массива Sergey111 Общие вопросы Javascript 3 06.05.2012 10:51