我正在为一名摄影师做后台工作，那里的照片会在带有子类别的相册中。
我在相册创建页面中使用 JavaScript 添加新的 .photo block (及其 HTML 内容)。
问题是我显然得到了函数albums.addPhoto 的无限循环。这是我的 JS 代码(albums.addPhoto 由 onclick 属性调用并调用 albums.createBlock):

    var albums =  {
    createBlock: function (tag, attributes, text, elemID, elemCLASS) {
        var block = document.createElement(tag);
        switch (tag) {
            case "label":
            block.setAttribute('for', attributes[0]);
            break;
            case "input":
            block.setAttribute('type', attributes[0]);
            block.setAttribute('name', attributes[1]);
            if (attributes[0] == "text") {
                block.setAttribute('placeholder', attributes[2]);
            } else {
                block.setAttribute('value', attributes[2]);
            }
            break;
            default:

        }

        if (text) {
            block.textContent = text;
        }
        if (elemID) {
            block.id = elemID;
        }
        if (elemCLASS) {
            block.classList.add(elemCLASS);
        }

        return block;
    },
    addPhoto: function (currentSsCat, requiredPhotoID) {
        var elem = albums.createBlock("div", null, false, ("photo_" + currentSsCat + "_" + requiredPhotoID), "photo");
        document.querySelector('#ss_cat_1').appendChild(elem);

        elem.appendChild(albums.createBlock("label", ["file_" + currentSsCat + "_" + requiredPhotoID], "Importez le fichier photo", false, false));
        elem.appendChild(albums.createBlock("input", ["file", ("file_" + currentSsCat + "_" + requiredPhotoID), "Votre photo"], false, false, false));
        elem.appendChild(albums.createBlock("label", ["ref_" + currentSsCat + "_" + requiredPhotoID], "Référence de la photo", false, false));
        elem.appendChild(albums.createBlock("input", ["text", ("ref_" + currentSsCat + "_" + requiredPhotoID), "Exemple: 20160811_CLS_0005"], false, false, false));
        elem.appendChild(albums.createBlock("label", ["desc_" + currentSsCat + "_" + requiredPhotoID], "Description de la photo", false, false));
        elem.appendChild(albums.createBlock("input", ["text", ("desc_" + currentSsCat + "_" + requiredPhotoID), "Exemple: Paolo FABBRI et Lenas Drawin His Gun (ITA)."], false, false, false));

        document.querySelector("#add_photo_" + currentSsCat).onclick = albums.addPhoto(currentSsCat, (requiredPhotoID + 1));
    }
};

然后你有 HTML 部分(我只给你 form 部分，我可以发送整个页面，但我认为它没有用):

<form action="index.html?page=aa" method="post">
<!-- SOUS CATEGORIE -->
        <div class="ss_cat" id="ss_cat_1">
            <label for="ss_cat_1_titre">Titre :</label>
            <input type="text" name="ss_cat_1_titre" placeholder="Titre de la sous-catégorie...">

            <!-- PHOTOS DE LA CATEGORIE -->
            <div class="photo" id="photo_1_1">
                <label for="file_1_1">Importez le fichier photo :</label>
                <input type="file" name="file_1_1" value="Votre photo">
                <label for="ref_1_1">Référence de la photo :</label>
                <input type="text" name="ref_1_1" placeholder="Exemple: 20160811_CLS_0005">
                <label for="desc_1_1">Description de la photo :</label>
                <input type="text" name="desc_1_1" placeholder="Exemple: Paolo FABBRI et Lenas Drawin His Gun (ITA).">
            </div>
        </div>


        <!-- This is the link calling the function albums.addPhoto -->
        <a href="#" class="btn" id="add_photo_1" onclick="albums.addPhoto(1, 2)">Ajouter une photo</a>
    </div>
    <a href="#" class="btn" id="add_ss_cat">Ajouter un sous-catégorie</a>
    <input type="submit" name="submit" value="Ajouter le nouvel album">
</form>

测试: 该函数完成了它的工作，但是有一个无限循环(浏览器崩溃或者问我是否要停止脚本，它显示了大量的 .photo block 已创建)。
在 Chrome 上，我收到消息 maximum call stack size exceeded，在 Firefox 上，我收到太多递归。

PS:这是我第一次尝试创建后台，如果您对其他方法有任何建议，请随时提出。感谢阅读和帮助。

最佳答案

这是你的问题:

 document.querySelector("#add_photo_" + currentSsCat).onclick = albums.addPhoto(currentSsCat, (requiredPhotoID + 1));

您无条件地在 albums.addPhoto 中调用 albums.addPhoto，因此存在无限递归。你可能想要这个:

document.querySelector("#add_photo_" + currentSsCat).onclick = function () { albums.addPhoto(currentSsCat, (requiredPhotoID + 1)); };

这样您就可以将 onclick 处理程序设置为一个函数，而不是该函数的结果(这是未定义的，无论如何都没有意义)，并且它仅在有点击事件时运行。

关于javascript - 具有递归javascript函数的无限循环，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40380955/