如果存在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();
}