Run a function once for an event package using jQuery

Question

I use jQuery to listen for the DOMSubtreeModified event, and then execute the function. What I need is a way to run only one function in a single event package. Thus, in this case, the event will work only after 1 second and again after 3 seconds. What is the best way to do this?

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

 <div id="container"></div> 

Update
The setTimeout function is intended only to emulate my problem. I need a solution without changing the setTimeout code. The problem I am facing is that I am getting a DOMSubtreeModified event burst and I only need to get one package.

Answer 1

I decided it myself.

 $(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'); } 

This throws an event 3 times in the Firebug console and has an accuracy of up to 100 ms.

Answer 2

An alternative method that will control the speed of any 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 3

This is similar to what you are looking for:

 $( 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 ); } 

This provides the following stream:

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

Answer 4

try using one() handler

documentation