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