Call a function after specified amount of time without changes to the DOM

Question

Suppose you want to display an alert 3 seconds after there no changes in the DOM just after pressing a button that triggers a lot of changes.

An example with a button gotten via jQuery:

$someButton.on('click',function(){
  setInterval(function(){
    if( noChangesSinceLastTime()){
      time += 100;  
    }
    else{
      time = 0;
    } 

    if( time == 3000){
      alert("3 seconds without changes!");
    }

  },100);
});

Assume that the click event on that button has some other binding that excecutes a series of functions for DOM manipulation.

How could I achieve something as the noChangesSinceLastTime()function?

More on my specific problem

I have an HTML+JS+CSS slideshow which works with many simultaneous clients in a network.

When a new client joins, he is automatically sent to the start of the current slide being watched by others.

What I want to do is that, just after it finishes loading the current slide, trigger the clicks necessary to sync the new client with others (since every click inside a slide triggers an animation step, and most slides have multiple steps).

I cannot add a callback in the JS slideware, since it's an obfuscated JS not made by me.

Here is reversed question http://stackoverflow.com/questions/2844565/is-there-a-jquery-dom-change-listener/11546242 — jcubic, Jan 07 '13 at 19:34

score 0 · Accepted Answer · answered Jan 07 '13 at 19:14

0

This is just pseudo code, but you could try something like this:

timer = setTimeout(function(){
   alert("3 seconds without changes!");
}, 3000);

if(/*some change happens*/) {
   clearTimeout(timer);
}

answered Jan 07 '13 at 19:14

Naftali

144,921
39
244
303

I tried something similar, with a `while` block instead of an `if`, but it resulted to be blocking code, thus not allowing for the DOM changes to finish. – Sam Jan 07 '13 at 19:20
@Sam while loop is blocking. – Naftali Jan 07 '13 at 19:21
I see. I'll give a try with to your solution. Anyway, as far as I know, the /*some change happens*/ isn't trivial to detect. I am taking a look at [mutation observers](http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers) but I don't know if they will work out of the box in different browsers. – Sam Jan 07 '13 at 19:33
This worked very good, but my approach was wrong, since there were hidden changes to the DOM that continued for a while. What I finally did was something similar, but detecting only an specific change that always triggers just after the slide finishes loading. (In my case, the visibility of a "loading" visual feedback). – Sam Jan 16 '13 at 13:13

score 0 · Answer 2 · answered Jan 07 '13 at 19:33

0

You could listen to all of the DOM Mutatation events and set a flag if any of those are were triggered.

Then in you interval function, you could check that flag and do whatever logic you want. =).

Regards,

answered Jan 07 '13 at 19:33

Hugo

6,244
8
37
43

Call a function after specified amount of time without changes to the DOM

More on my specific problem

2 Answers2