javascript 未捕获的 RangeError：innerHTML 超出了最大调用堆栈大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16466691/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught RangeError: Maximum call stack size exceeded with innerHTML
提问by user2367110
I'm not very experienced with Javascript, but I'm running into an issue I can't understand. My code is very simple:
我对 Javascript 不是很有经验，但我遇到了一个我无法理解的问题。我的代码很简单：
document.getElementById ('chat_line_list').addEventListener ("DOMSubtreeModified", LocalMain, false);
function LocalMain ()
{
var chatList = document.getElementById('chat_line_list').lastChild.lastElementChild.innerHTML;
chatList = chatList.replace('InfoThump', '<span class="newemo-1 emoticon"></span>');
chatList = chatList.replace('MuskMelon', '<span class="newemo-2 emoticon"></span>');
chatList = chatList.replace('PoisonApple', '<span class="newemo-3 emoticon"></span>');
chatList = chatList.replace('PoisonBanana', '<span class="newemo-4 emoticon"></span>');
chatList = chatList.replace('PoisonWatermelon', '<span class="newemo-5 emoticon"></span>');
chatList = chatList.replace('PoisonGrape', '<span class="newemo-6 emoticon"></span>');
chatList = chatList.replace('NotNippy', '<span class="newemo-7 emoticon"></span>');
document.getElementById('chat_line_list').lastChild.lastElementChild.innerHTML = chatList;
}
The exception occurs on the last line of the LocalMain() function, when I replace the innerHTML with my newly-modified string. Is there something in this code that causes a loop or overflow?
当我用新修改的字符串替换 innerHTML 时，LocalMain() 函数的最后一行发生异常。这段代码中是否有导致循环或溢出的内容？
回答by epascarello
You are causing an infinite loop!
你正在造成无限循环！
You are listening to DOMSubtreeModified on the element chat_line_list, then you update that element inside of the function attached to that event!
您正在侦听 element 上的 DOMSubtreeModified chat_line_list，然后在附加到该事件的函数内更新该元素！
回答by ketan
try this
试试这个
document.getElementById ('chat_line_list').addEventListener ("DOMSubtreeModified", LocalMain, false);
function LocalMain ()
{
var chatList = document.getElementById('chat_line_list').lastChild.lastElementChild.innerHTML;
chatList = chatList.replace('InfoThump', '<span class="newemo-1 emoticon"></span>');
chatList = chatList.replace('MuskMelon', '<span class="newemo-2 emoticon"></span>');
chatList = chatList.replace('PoisonApple', '<span class="newemo-3 emoticon"></span>');
chatList = chatList.replace('PoisonBanana', '<span class="newemo-4 emoticon"></span>');
chatList = chatList.replace('PoisonWatermelon', '<span class="newemo-5 emoticon"></span>');
chatList = chatList.replace('PoisonGrape', '<span class="newemo-6 emoticon"></span>');
chatList = chatList.replace('NotNippy', '<span class="newemo-7 emoticon"></span>');
document.getElementById ('chat_line_list').removeEventListener ("DOMSubtreeModified", LocalMain);
document.getElementById('chat_line_list').lastChild.lastElementChild.innerHTML = chatList;
document.getElementById ('chat_line_list').addEventListener ("DOMSubtreeModified", LocalMain, false);
}
回答by Salem
Yes, Basically you are saying that each time that element is modified, LocalMainshould be executed. As LocalMainalso changes the element, it is executed again, and again,...
是的，基本上您是说每次修改该元素时都LocalMain应该执行。由于LocalMain还改变元素，它又一次，又一次执行，...
You can try to remove the EventListener and add it again after (haven't tried so I can't tell you if it would work...)
您可以尝试删除 EventListener 并在之后再次添加它（还没有尝试过，所以我无法告诉您它是否有效...）
function LocalMain ()
{
var chatList = document.getElementById('chat_line_list').lastChild.lastElementChild.innerHTML;
chatList.removeEventListener("DOMSubtreeModified", LocalMain, false);
chatList = chatList.replace('InfoThump', '<span class="newemo-1 emoticon">
(...)
chatList = chatList.replace('NotNippy', '<span class="newemo-7 emoticon"></span>');
document.getElementById('chat_line_list').lastChild.lastElementChild.innerHTML = chatList;
chatList.addEventListener ("DOMSubtreeModified", LocalMain, false);
}
回答by Hexodus
I suggest to wait 100 microseconds before calling your function using setTimeout()method. This works fine for me - no errors so far.
我建议在使用setTimeout()方法调用函数之前等待 100 微秒。这对我来说很好 - 到目前为止没有错误。
document.getElementById ('chat_line_list').addEventListener("DOMSubtreeModified", setTimeout(LocalMain, 100), false);
Please please be aware that this solution is far from being perfect. This function is still being executed to often.
请注意，此解决方案远非完美。这个函数仍然被执行到经常。
