eu tenho o seguinte código

var data = [
  { id: "0" },
  {
    id: "1",
    children: [
      {
        id: "1.1",
        children: [
          {
            id: "1.1.1",
            children: [
              {
                id: "1.1.1.1",
                children: [
                  { id: "1.1.1.1.1" },
                  { id: "1.1.1.1.2" },
                  { id: "1.1.1.1.3" }
                ]
              },
              { id: "1.1.1.2" },
              { id: "1.1.1.3" }
            ]
          },
          { id: "1.1.2" },
          { id: "1.1.3" },
        ]
      },
      { id: "1.2" },
      { id: "1.3" }
    ]
  },
  { id: "2" },
  { id: "3" }
];

function recursive(current) {
  var first = current[0];
  current.shift();
  var remaining = current;

  console.log(first.id);

  if (first.children) {
    setTimeout(function(){
      recursive(first.children);
    })
  }

  if (remaining.length) {
    setTimeout(function(){
      recursive (remaining);
    });
  }
}

recursive(data);

Esta saída não está em ordem devido ao setTimeout

Pergunta, questão:

Como posso alterá-lo para exibir algo como na imagem abaixo?Como sei a última iteração nessa função recursiva? Preciso executar algo assim que a lista estiver esgotada.

I não posso usar forEach porque euter para usar setTimeouts por um motivo diferente. Eu entendo setTimeout não funciona corretamente em um loop. Alguma ideia????

Saída desejada: