Javascript 如何延迟迭代嵌套对象

我无法独自解决这个问题，需要你的帮助。 我正在phonegap应用程序中使用嵌套主干对象，并希望将它们全部保存。保存时，我想显示正在加载的动画。保存所有内容后，我想继续下一页/步骤。 我已经实现了这一点，但动画不起作用，因为我的保存循环正在阻止所有UI更新。（我正在保存到localStorage，而不是通过ajax。）因此，我尝试在保存每个项目之间插入超时来降低保存速度。现在保存被延迟，但在所有内容真正保存之前，接口将继续到下一页。我的回调设置似乎不正确

您知道干净嵌套回调的模式吗

我已经准备好了

您能帮我修复它吗？这样它就可以按正确的顺序创建警报：

A1、A2、A3、A4、A5、A6、A7、B1、B2、B3，一切都完成了

先谢谢你

如果您不想查看小提琴，以下是代码：

var forest = {
    "trees": [{
        "id": "tree A",
            "leaves": [{
            "name": "A1"
        }, {
            "name": "A2"
        }, {
            "name": "A3"
        }, {
            "name": "A4"
        }, {
            "name": "A5"
        }, {
            "name": "A6"
        }, {
            "name": "A7"
        }]
    }, {
        "id": "tree B",
            "leaves": [{
            "name": "B1"
        }, {
            "name": "B2"
        }, {
            "name": "B3"
        }]
    }]
};

var callback = function () {
    alert("Everything is finished");
};

var workOnTree = function (tree, callback) {
    var leaves = tree.leaves;
    var leafCount = 0;
    var delayedAlert = function () {
        alert(leaves[leafCount].name);
        leafCount += 1;
        if (leafCount < leaves.length) {
            setTimeout(delayedAlert, 1000);
        } else {
            if (callback !== undefined && typeof callback == 'function') {
                callback();
            }
        }
    };
    setTimeout(delayedAlert, 1000);
};

var workOnForest = function (forest, callback) {
    var trees = forest.trees;
    var treeCount = 0;
    var delayedExecution = function () {
        if (treeCount == (trees.length - 1)) {
            // for last tree pass callback
            workOnTree(trees[treeCount], callback);
        } else {
            workOnTree(trees[treeCount]);
        }
        treeCount += 1;
        if (treeCount < trees.length) {
            // this gives a delay between the trees
            setTimeout(delayedExecution, 1000);
        }
    };
    setTimeout(delayedExecution, 1000);
};
workOnForest(forest, callback);

var林={
“树木”：[{
“id”：“树A”，
“叶子”：[{
“名称”：“A1”
}, {
“名称”：“A2”
}, {
“名称”：“A3”
}, {
“名称”：“A4”
}, {
“名称”：“A5”
}, {
“名称”：“A6”
}, {
“名称”：“A7”
}]
}, {
“id”：“树B”，
“叶子”：[{
“名称”：“B1”
}, {
“名称”：“B2”
}, {
“名称”：“B3”
}]
}]
};
var callback=函数（）{
警惕（“一切都结束了”）；
};
var workOnTree=函数（树，回调）{
var叶=树叶；
var-leaftcount=0；
var delayedAlert=函数（）{
警报（叶[leaftcount].name）；
叶数+=1；
if（叶数<叶长）{
设置超时（delayedAlert，1000）；
}否则{
if（callback！==未定义&&typeof callback=='function'）{
回调（）；
}
}
};
设置超时（delayedAlert，1000）；
};
var workinfo=函数（林，回调）{
var-trees=森林树；
var-treeCount=0；
var delayedExecution=函数（）{
if（treeCount==（trees.length-1））{
//对于最后一个树传递回调
workOnTree（树[treecoount]，回调）；
}否则{
（树木[树木计数]）；
}
树计数+=1；
if（treecoount

我认为应该使用.sort（）方法，并且应该在该方法中添加自己的参数。这些将给你一个想法：

---

我想到了将回调添加到最长的集合中。这样，回调在处理完所有内容后发生

在延迟执行函数中，我执行以下操作：

if (treeCount == maxLeavesTreeIndex) {
    // for last tree pass callback
    workOnTree(trees[treeCount], callback);
}

因此，不是最后处理的集合获得回调，而是最大的集合

看

你认为这个解决方案怎么样

---

如果您有更好的想法，请提交一份答案。

如果我了解您想要实现的目标，并且我认为我了解（但我可能错了），那么使用队列模型不是更好吗

实际上，您需要setTimout（）来运行UI事件，以便获得更新。这不需要很长，0毫秒或1毫秒（只是为了优化）就可以了

我要做的是使用一个回调函数，从一个列表中提取一个叶项目，对其进行处理，然后在每次还有更多工作要做的情况下使用setTimeout（）重新安排更多的工作

这样，您的操作将被连续处理。我认为你不希望它们并行运行，尽管看起来事情就是这样。因此，您的回调也将被序列化

---

我知道你已经建立了一个精心设计的例子，专门用来尽可能简单地演示这个问题，但是这使得了解你想做什么有点困难，但是我说的对吗？

嗨，光剑。我看不出分类对我有什么帮助。实际上，我不想对事物进行排序，而是以一种确定性但延迟的方式处理对象集合。我看到你被我愚蠢的示例误导了。。计算只是为了显示我想要的执行顺序。如果在处理当前回调的过程中只触发下一次回调的setTimeout，效果会更好吗？这样，它们就被正确地序列化了。仍在试图理解您的意思。：-）如果仔细观察，我有两个嵌套的for循环。每一棵树，每一片叶子。如果我只有一个循环，你是对的（如果我理解正确的话…）。对于一个循环，setTimeout不会改变顺序性（如果是一个单词：-），我当前的想法是将回调函数传递给具有最多叶子的树。由于回调应该只执行一次，并且只在所有工作完成时执行，因此这可能是一个比我目前所拥有的更好的解决方案。你觉得怎么样？有人吗？有谁有更好的解决办法吗？我的解决方案更多的是一种变通方法。我对更好的解决方案很感兴趣。你完全正确。我在这里张贴了我自己的安塞信之后，也无意中发现了排队的情况，我认为这是应该走的路。一旦我设法用队列实现它，我会将您的答案标记为已接受的答案。谢谢！