javascript - 事件监听器 DOMNodeInserted 被多次运行，为什么？

Question

我正在尝试监听具有特定类的节点动态添加到 DOM。添加此节点后，我想向此节点添加一个插件实例。我遇到的问题是 DOMNodeInserted 运行了多次，然后在这个导致问题的节点上多次运行我的插件。

这个类在页面上只出现一次。

为什么会这样，我怎样才能阻止这种情况发生？

$(document).ready(function(){
    
    $('#editArea').live('DOMNodeInserted', '.class', function(e){

        $('.class').plugin({
            source: 'libs/ajax/somescript.php',
        });
                    
    })
    
});

Answer 1

我前一段时间遇到了同样的问题。您需要做的是对函数进行去抖动，以便它在最后一次 DOMNodeInserted 调用后触发。

试试这个(改编自 John Hann 的 smartresize——留下的评论/链接):

(function ($, sr) {
        // debouncing function from John Hann
        // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
        var debounce = function (func, threshold, execAsap) {
            var timeout;
            return function debounced() {
                var obj = this, args = arguments;
                function delayed() {
                    if (!execAsap)
                        func.apply(obj, args);
                    timeout = null;
                };
                if (timeout) {clearTimeout(timeout);
                } else if (execAsap) {func.apply(obj, args);}
                timeout = setTimeout(delayed, threshold || 100);
            };
        }
        jQuery.fn[sr] = function (fn) { return fn ? this.on('DOMNodeInserted', debounce(fn)) : this.trigger(sr); };
    })(jQuery, 'debouncedDNI');

    $(document).ready(function () {
        $('#editArea').debouncedDNI(function () {
            $('.class').plugin({
                source: 'libs/ajax/somescript.php',
            });
        });
    });