Ways to call JavaScript Functions

Question

How can I call a JavaScript function when a div's display is set to none?

This is the code I have :

if(document.getElementById("myDiv").style.display == "none"){

myFunction();

}

I was thinking having a function that repeats everytime (similar to an actionscript ENTER_FRAME event) with the if statement within it but i imagine that would ass a lot of lag.

Sorry if Im not clear enough.

Answer 1

I can think of 2 options.

1. What you have above being called with setInterval.

Or

1. Since you're waiting on a programatic event, why don't you call myFunction the same time you show myDiv?

Answer 2

Unfortunately, I don't believe there is a native way to listen for style changes. I would create some proxy functions. Whenever you want to hide or show the div, call these proxy functions, rather than setting the style directly.

function hideMyDiv() {
    document.getElementById("myDiv").style.display = "none";
    myFunction();
}

function showMyDiv() {
    document.getElementById("myDiv").style.display = "block";
}

Coomie's suggestion of polling with setInterval would not be processor efficient.

Answer 3

Trying to work out a useful thing to say here.

Basically, you want to try and design your software such that you don't need to try and do this sort of thing.

Probably your easiest way forward would be to adopt what JoJo's suggesting.

Another approach is to add a little abstraction, so that whatever would cause the div to be hidden raises an event, one listener of the event hides the div, another does your other action.