4

我对 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;
}

当我用新修改的字符串替换 innerHTML 时，异常发生在 LocalMain() 函数的最后一行。此代码中是否存在导致循环或溢出的内容？

4

4 回答 4

5

您正在导致无限循环！

您正在收听元素上的 DOMSubtreeModified chat_line_list，然后在附加到该事件的函数内更新该元素！

于 2013-05-09T16:39:28.443 回答
1

尝试这个

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

}
于 2013-05-09T16:52:54.673 回答
1

是的，基本上你是说每次修改该元素时都LocalMain应该执行。由于LocalMain也改变了元素，它被再次执行，一次又一次，......

您可以尝试删除 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);
}
于 2013-05-09T16:54:37.940 回答
0

setTimeout()我建议在使用方法调用你的函数之前等待 100 微秒。这对我来说很好 - 到目前为止没有错误。

    document.getElementById ('chat_line_list').addEventListener("DOMSubtreeModified", setTimeout(LocalMain, 100), false);

请注意，此解决方案远非完美。这个功能仍然经常被执行。

于 2015-01-03T13:55:26.903 回答