How to determin that javascript has finished doing something

Question

JS on ios is rather slow. For example in this piece of code, the Js adds the class before being able to add the block style. This breaks an animation i have on the page.

comments.style.display="block";comments.className = "show";

I have a workaround that fixes the issue on ios but just feels wrong:

comments.style.display="block";setTimeout(function(){comments.className = "show";},1)

Is there any way to determine if the block style has been set and only then trigger the second part?

Thanks for your suggestions!

@harmonickey didn't even know "then" existed! need to look into that :) — cmplieger, Sep 15 '12 at 04:34
haha, yeah. Just a clarification of what I would have meant by "if" statement. — harmonickey, Sep 16 '12 at 09:20

score 1 · Accepted Answer · edited May 23 '17 at 11:55

1

Can't you just use an if?

<div id="foo" style="display: none;">foo</div>

var div = document.getElementById( "foo"  );
if ( div.style.display == "none" ) {
    div.style.display = "block";
}

If you want to listen to a class change (or a style change) "event", you can try these links:

Event detect when css property changed using Jquery <= this solves the problem without jQuery
jQuery - Fire event if CSS class changed
Trigger event using Jquery on CSS change?
Is it possible to listen to a "style change" event?

I think the first one will solve your problem. Here is the code:

document.documentElement.addEventListener( "DOMAttrModified", function( evt ){
    if ( evt.attrName === "style" ) {
        if ( evt.newValue.indexOf( "block" ) != -1 ) {
            alert( "do something!" );
        }
    }
}, false );

document.getElementById( "foo" ).style.display = "block";

edited May 23 '17 at 11:55

Community

1
1

answered Sep 15 '12 at 04:32

davidbuzatto

9,207
1
43
50

I sincerely do not see how I can write it down any clearer. I want it to set a class. When that is done trigger something else. My code above just runs all of it without waiting for each step to finish. – cmplieger Sep 15 '12 at 04:38
So, you want to listen to a "change class" event? – davidbuzatto Sep 15 '12 at 04:39
The links you provided are only for jquery :(. doesn't help. – cmplieger Sep 15 '12 at 04:46
No, the first one don't use jQuery. I writing an example... Wait a moment. – davidbuzatto Sep 15 '12 at 04:48

score 1 · Answer 2 · 2012-09-15T04:51:25.760

1

This is a glorious mess of a hack that may work:

comments.blockStyleEvent = function() {
   if ( this.style.display === "block" ) {
      this.onBlockStyleEvent.apply(this);
   }
};

comments.onBlockStyleEvent = function() {
   this.className = "show";
};

setInterval(function(){
  comments.blockStyleEvent();
}, 1);

You could also create two css classes one show and another showAsBlock for example then you could do this:

// somewhere else
comments.className = "hide";

// ...then
comments.className = "showAsBlock";

edited Sep 15 '12 at 04:51

answered Sep 15 '12 at 04:45

your second answer (2 classes) may indeed fix this! great, easy & obvious solution :). 'll try and report back! – cmplieger Sep 15 '12 at 04:49
No problem, simpler is better, much, much, much better. Also a CSS preproccessor (e.g. SASS or LESS) could help reduce some repetitiveness if that becomes a problem. – Sep 15 '12 at 04:50

How to determin that javascript has finished doing something

2 Answers2