递归javascript函数的无限循环
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了递归javascript函数的无限循环，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3886字，纯文字阅读大概需要6分钟。
内容图文
我正在为摄影师提供后台服务,其中照片将包含在带有子类别的相册中.
我在相册创建页面中使用JavaScript添加一个新的.photo块(及其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 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块).
在Chrome上,我收到消息超出了最大调用堆栈大小,在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处理程序设置为一个函数,而不是该函数的结果(未定义且无论如何都没有意义),并且仅在发生click事件时运行.
内容总结
以上是互联网集市为您收集整理的递归javascript函数的无限循环全部内容，希望文章能够帮你解决递归javascript函数的无限循环所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。