Question

我正在为留言板编写代码，当用户正在撰写帖子并点击＆＃34;预览＆＃34;它创建一个包含已解析帖子的新DIV元素。我需要检测何时创建此预览元素并修改其内容。以下代码在Chrome中创建无限递归，Firefox在5次递归后停止。

$('#c_post').on('DOMNodeInserted', function(){
    var $preview = $('#c_post-preview');
    if($preview.length) { 
        $preview.html(applyForEach(funcs, $preview.html())); 
    }
});

它与applyForEach无关，因为我刚刚添加了该代码，之前我收到了递归错误，但无论如何都是这里的代码：

function applyForEach(arr, s) {
    for(var i = 0; i < arr.length; ++i) {
        s = arr[i](s);
    }
    return s;
}

var funcs = [createGifvVideo, createGfycatVideo, createHtml5Video];

这些函数只需要一个字符串，对它调用replace，然后返回字符串。

Answer 1

您可以通过解除绑定和绑定事件来打破无限递归。所以它不会进入无限通话。试试以下 -

$('#c_post').on('DOMNodeInserted',DomInsCallback);

function DomInsCallback(){
    var $preview = $('#c_post-preview');
    if($preview.length) {
        $('#c_post').off('DOMNodeInserted');//here unbind first 
        $preview.html(applyForEach(funcs, $preview.html())); 
        $('#c_post').on('DOMNodeInserted',DomInsCallback);//bind again
    }
}

Answer 2

我认为#c_post-preview位于#c_post内。因此，当您修改#c_post-preview时，会再次触发事件DOMNodeInserted。然后再次捕获它，然后修改#c_post-preview，依此类推......

Answer 3

很可能你在public void add(ChatMessage message) { chatMessages.add(message); notifyDataSetChanged(); } public void add(List<ChatMessage> messages) { chatMessages.addAll(messages); notifyDataSetChanged(); }内嵌套了#c_post-preview，但我无法确定，因为你没有发布HTML源代码。当然，这将导致无限循环的触发和捕获事件。但除此之外，我认为你不想申请每个帖子预览的内容，而是帖子本身的内容。

请考虑以下事项：http://jsfiddle.net/wpb18pyu/ 与：http://jsfiddle.net/wpb18pyu/1/

相比

修改DOMNodeInserted事件中插入的元素会产生过多的递归＆＃34;

3 个答案: