JavaScript 循环未完成

Question

已解决 - 我的代码没有在所有应该使用 var 的地方使用 var 。添加此内容可以解决该问题。

我正在尝试使用循环来遍历给定“场景”的子节点。在这个例子中，它是场景 2。我的代码允许“链接”，它本质上是先加载另一个场景的子节点，然后再返回当前场景并加载剩余的子节点。问题是，每当我使用链接时，它都会阻止原始场景完成加载。

XML:

<scene id="2">
    <content>Scene2-Content1</content>
    <content>Scene2-Content2</content>
    <link id="4"/>
    <choice content="Scene2-Choice1"/>
</scene>
<scene id="4">
    <content>Scene4-Content1</content>
    <choice content="Scene4-Choice1"/>
</scene>

JavaScript:

var app = {
    loadScene: function (scene) {
        //find the scene and load the scene data
        if(app.storyXml != null)
        {
            sceneNodes = app.storyXml.getElementsByTagName("scene");
            for(i=0; i<sceneNodes.length; i++)
            {
                id = sceneNodes[i].getAttribute("id");
                if(id == scene)
                {
                    app.loadSceneData(sceneNodes[i]);
                    break;
                }   
            }
        }
    },
    loadSceneData: function (scene) {
        childNodes = scene.childNodes;

        try
        {
            length = childNodes.length;
            for(i=0; i<childNodes.length; i++)
            {
                console.log((i+1)+"/"+childNodes.length);
                tag = childNodes[i].tagName;
                if(tag == "content")
                    app.loadSceneContent(childNodes[i]);
                if(tag == "link")
                    app.loadSceneLink(childNodes[i]);
                if(tag == "choice")
                    app.loadSceneChoice(childNodes[i]);
            }
        }
        catch(err)
        {
            console.log(err);
        }
    },
    loadSceneLink: function (node) {
        if(app.storyXml != null)
        {
            sceneNodes = app.storyXml.getElementsByTagName("scene");
            for(i=0; i<sceneNodes.length; i++)
            {
                id = sceneNodes[i].getAttribute("id");
                if(id == node.getAttribute("id"))
                {
                    app.loadSceneData(sceneNodes[i]);
                    break;
                }
            }
        }
    }
}
//loadSceneContent and loadSceneChoice omitted--they simply add some elements to the page.

在此特定示例中，为场景 2 中的前两个内容节点调用 loadSceneContent/loadSceneChoice。之后，链接为内容/选择节点调用它们。我希望控件返回到原始 loadSceneData 循环，但它只是跳转到原始 loadSceneData 调用中的循环末尾。我用头撞墙，尝试了所有我能想到的变体。似乎没有任何作用。

如果我删除链接节点，场景 2 中的所有内容都会按预期加载。

我不经常在 Stack Overflow 上发帖，所以如果我遗漏了问题中的一些重要内容，请告诉我。感谢您的帮助!

Answer 1

使用 var 声明循环变量 i 应该可以解决调用方法之间的任何冲突。如果没有 var，i 会被声明为全局变量...这意味着所有方法最终都会共享其使用。如果单独调用每个方法就好了，但它们是在每个循环中调用的。如果您在另一个方法的循环中间调用一个方法，i 的值就会被修改，从而弄乱包含的循环。

例如，您的第一个循环应如下所示:

for(var i=0; i<sceneNodes.length; i++)