Uncaught RangeError: Maximum call stack size exceeded mit innerHTML

Ich bin nicht sehr erfahren mit Javascript, aber ich bin mit in einer Frage, die ich nicht verstehen kann. Mein code ist ganz einfach:

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

Die Ausnahme tritt in der letzten Zeile der LocalMain () - Funktion, wenn ich Sie ersetzt den innerHTML mit meiner neu modifizierten string. Gibt es etwas in diesem code, der bewirkt, dass eine Schleife oder einen überlauf?

InformationsquelleAutor user2367110 | 2013-05-09

  1. 5

    Werden Sie verursachen eine Endlosschleife!

    Hören Sie DOMSubtreeModified auf das element chat_line_list, dann aktualisieren Sie das element innerhalb der Funktion an das event!

    Du hast Recht, ich kann nicht glauben, dass ich verpasst. Kann ich wohl ein Problem quick-and-dirty-fix, indem er die Letzte Zeile nur ausführen, wenn der string wurde modifiziert, so dass die Funktion zweimal aufgerufen werden. Können Sie denken, ein guter Weg, es haben nur einmal ausgeführt?
    Okay, ich habe mein problem gelöst, durch das hören für DOMNodeInserted statt DOMSubtreeModified. Dies macht Sinn im Zusammenhang mit einem chat-client. Vielen Dank für Ihre Hilfe!

    InformationsquelleAutor epascarello

  2. 1

    versuchen, diese

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

}

    InformationsquelleAutor ketan

  3. 1

    Ja, im Grunde sagen Sie, dass jedes mal, wenn das element geändert wird, wird LocalMain ausgeführt werden soll. Als LocalMain ändert sich auch das element, es wird wieder ausgeführt, und wieder,...

    Können Sie versuchen, entfernen Sie die EventListener und fügen Sie es wieder nach (habe nicht versucht, also kann ich dir nicht sagen, ob es funktionieren würde...)

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

    InformationsquelleAutor Salem

  4. 0

    Schlage ich vor, zu warten, zu 100 Mikrosekunden vor dem Aufruf der Funktion mit setTimeout() Methode. Dies funktioniert gut für mich - keine Fehler bisher. 

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

    Bitte seien Sie sich bitte bewusst, dass diese Lösung bei weitem nicht perfekt. Diese Funktion noch ausgeführt wird, zu oft.

    InformationsquelleAutor Hexodus

Schreibe einen Kommentar