使用jQuery为每个事件突发运行一次函数

我正在使用jQuery来监听DOMSubtreeModified事件，然后执行一个函数。 我需要的是每个事件爆发只运行一次函数的方法。 因此，在这种情况下，事件将仅在1秒后运行，并在3秒后再次运行。 做这个的最好方式是什么？

jQuery的

$(function(){ setTimeout(function(){ $('#container')[0].innerHTML = 'test'; $('#container')[0].innerHTML = 'test'; $('#container')[0].innerHTML = 'test'; $('#container')[0].innerHTML = 'test'; $('#container')[0].innerHTML = 'test'; $('#container')[0].innerHTML = 'test'; },1000); setTimeout(function(){ $('#container')[0].innerHTML = 'test'; $('#container')[0].innerHTML = 'test'; $('#container')[0].innerHTML = 'test'; $('#container')[0].innerHTML = 'test'; $('#container')[0].innerHTML = 'test'; $('#container')[0].innerHTML = 'test'; },3000); $('#container').bind('DOMSubtreeModified',function(){ console.log('event'); functionToRun(); }); }); 

HTML

更新
setTimeout函数只是为了模拟我的问题。 我需要一个解决方案，而无需更改setTimeout代码。 我遇到的问题是我得到了突发的DOMSubtreeModified事件，我需要每个突发只获得一个。

Answer 1

替代方法，它将控制任何function的速率。

 // Control the call rate of a function. // Note that this version makes no attempt to handle parameters // It always induces a delay, which makes the state tracking much easier. // This makes it only useful for small time periods, however. // Just clearing a flag after the timeout won't work, because we want // to do the the routine at least once if was called during the wait period. throttle = function(call, timeout) { var my = function() { if (!my.handle) { my.handle = setTimeout(my.rightNow, timeout); } }; my.rightNow = function() { if (my.handle) { clearTimeout(my.handle); my.handle = null; } call(); }; return my; }; 

Answer 2

自己解决了。

 $(function(){ setTimeout(function(){ $('#container')[0].innerHTML = 'test'; $('#container')[0].innerHTML = 'test'; $('#container')[0].innerHTML = 'test'; $('#container')[0].innerHTML = 'test'; $('#container')[0].innerHTML = 'test'; $('#container')[0].innerHTML = 'test'; },1000); setTimeout(function(){ $('#container')[0].innerHTML = 'test'; $('#container')[0].innerHTML = 'test'; $('#container')[0].innerHTML = 'test'; $('#container')[0].innerHTML = 'test'; $('#container')[0].innerHTML = 'test'; $('#container')[0].innerHTML = 'test'; },1100); setTimeout(function(){ $('#container')[0].innerHTML = 'test'; $('#container')[0].innerHTML = 'test'; $('#container')[0].innerHTML = 'test'; $('#container')[0].innerHTML = 'test'; $('#container')[0].innerHTML = 'test'; $('#container')[0].innerHTML = 'test'; },3000); addDivListener(); }); function addDivListener() { $('#container').bind('DOMSubtreeModified',function(){ functionToRun(); $(this).unbind('DOMSubtreeModified'); setTimeout(addDivListener,10); }); } function functionToRun(){ console.log('event'); } 

这在Firebug控制台中打印出事件 3次，精确到100毫秒。

Answer 3

尝试使用one()处理程序

文件

Answer 4

这似乎是你正在寻找的：

 $( function() { setTimeout ( StartWatching, 1000 ); } ); function StartWatching() { $('#container') .bind( 'DOMSubtreeModified', function() { console.log('event'); StopWatchingAndStartAgainLater(); } ); } function StopWatching() { $('#container') .unbind('DOMSubtreeModified'); } function StopWatchingAndStartAgainLater() { StopWatching(); setTimeout ( StartWatching, 3000 ); } 

这将强制执行以下流程：

 Document.Ready Create DOM watching event after one second On event, turn off event and recreate it after three seconds, rinse, repeat