如何延迟迭代嵌套对象

How to iterate through nested objects with delay

本文关键字：迭代 嵌套 对象 延迟 何延迟      更新时间：2023-09-26

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

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

我整理了一把小提琴来说明我的问题。

你能帮我修复它吗，这样它就可以按正确的顺序创建警报：A1, A2, A3, A4, A5, A6, A7, B1, B2, B3, Everything is finished

提前非常感谢。

如果你不想查看小提琴，下面是代码：

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);

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

您需要setTimout（）来运行UI事件，以便获得更新。这不需要很长时间，0ms或1ms（只是为了进行优化）就可以了。

我想做的是有一个回调函数，它从你的一个列表中提取一个叶项，处理它，然后如果还有更多的工作要做，每次都用setTimeout（）重新安排更多的工作。

这样，您的操作将被串行处理。我不认为你希望它们并行运行，尽管看起来这就是正在发生的事情。所以你的回电也会被连载。

我知道你已经建立了一个人为的例子，专门用来尽可能简单地演示这个问题，但这让你很难理解你想做什么，但我对此有把握吗？

我认为应该使用.sort（）方法，并且应该在该方法中添加自己的参数。这些会给你一个想法：如何使用jQuery按字母顺序对列表进行排序？http://james.padolsey.com/javascript/sorting-elements-with-jquery/

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

在延迟执行功能中，我这样做：

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

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

请参见此处。

你觉得这个解决方案怎么样？

如果你有更好的想法，请提交答案。

相关文章：