javascript - jQuery：在所有事件发生变化后只运行一次回调函数

Question

这是我的示例代码：

var contents = $('#contents');
contents.bind('DOMSubtreeModified', function () {
  ...
});

...

/* other people's code */
var contents = $('#contents');
contents.append(...);
contents.append(...);
...
...

我绑定到事件“DOMSubtreeModified”，我注意到我的回调函数将被调用超过 10 次，因为许多元素被插入/修改为连续的单独调用。我无法修改其他人的代码，也无法控制他们将如何实现附加新元素。有没有办法让我的回调函数在所有元素附加/更改后只被调用一次？

Answer 1

您可以使用setTimeout(). 这是一个工作小提琴

var timer;
$("#content").on("DOMSubtreeModified", function()
{
    if (timer) clearTimeout(timer);
    timer = setTimeout(function() { alert("finished"); }, 100);
});

$("button").on("click", function()
{
    $("#content").append("<span>FUS</span>");
    $("#content").append("<span> RO</span>");
    $("#content").append("<span> DAH</span>");
});​