Порядок вывода отличается, если присутствует setTimeout

Question

Код для возврата древовидной структуры в console.log с помощью рекурсивной функции, как показано ниже. Я добавил setTimeout, потому что мне нужны некоторые задержки во время обработки кода, но когда я его добавляю, порядок обработки выводится в совершенно другом формате. Кроме того, время задержки не кажется постоянным.

Предполагаемое значение

Если в узле после поиска заголовка первой категории есть дочерний элемент, поиск по заголовку второй категории выполняется по рекурсиву, и снова запрашивается значение потомков, а затем третье .. .. Если добавлен setTimeout, то сначала будет высеяно целое, затем второе целое, затем третье целое и т. д.

Почему это происходит?

            var time = 0;
            function searchTree(v, t){

                $(v).each(function(i,k){
                    setTimeout(function(){
                        if (t == 'clone'){
                            console.log(k.sCategoryTitle);
                            if (k.children){
                                searchTree(k.children,'clone');
                            }
                        }
                    }, time = time + 100);
                });
            }

пример кода: http://jsfiddle.net/uahg5qd9/3/

Answer 1

вы сделали свою функцию синхронной.

попробуйте следующий код, если это поможет вам.здесь я удалил цикл и поставил другую синхронную функцию, чтобы сделать его синхронным.

var time = 100;
function searchTree(v, t){
    var i=0;
    function loop(){
        if(i<v.length){
            let k = v[i];    
            if (t == 'clone'){
                console.log(k.sCategoryTitle);
                if (k.children){
                    setTimeout(function(){
                        time = time + 100;
                        searchTree(k.children,'clone');
                    },time);
                }else{
                    i++;
                    loop();
                }
            }else{
                i++;
                loop();
            }
        }else{
            i++;
            loop();
        }
    }
    loop();
}