Listen to style change made to an element by an external app using jQuery

Question

I have a form in my webpage which submits info to an external app and changes the style of an element based on the response from "display:none" to "display:block".

I want to be able to run a function once that change has been made, as it's my indication that the operation was successful.

How would you do such a thing?

http://stackoverflow.com/questions/2157963/is-it-possible-to-listen-to-a-style-change-event — makeitmorehuman, Jan 26 '15 at 16:37

Daniel Weiner · Answer 1 · 2015-01-26T18:25:56.987

1

Here's a quick and dirty way of doing it:

var onElementStyleChange = (function() {
  var elements = [],
      started = false;
  return function(element, callback) {
    elements.unshift({element: element, callback: callback});
    if (!started) {
      window.setTimeout(function checkElements() {
        for (var i = elements.length - 1; i >= 0; i--) {
          var element = elements[i].element,
              callback = elements[i].callback;
          if (element.style.display === 'block') {
            callback();
            elements.splice(i,1);
          }
        }
        if (elements.length) {
          window.setTimeout(checkElements, 0);
        } else {
          started = false;
        }
      },0);
      started = true;
    }      
  }
}());

then you can call this do have it check your element:

onElementStyleChange(element, function() {
  //do stuff..
});

Explanation: onElementStyleChange keeps checking your element over and over again and doesn't stop checking until your element's display style property is block. Once it sees that your element has display: block, it calls whatever function you pass into it and stops checking.

EDIT: Updated so that any number of elements can use this function.

edited Jan 26 '15 at 18:25

answered Jan 26 '15 at 16:35

Daniel Weiner

1,874
12
19

What if you had 250 elements you wanted to wach? You will setup 250 setTimeouts? – makeitmorehuman Jan 26 '15 at 16:37
@XGreen It's quick and dirty, but then again, watching the `style` attribute to trigger a function isn't a good way of doing things either. – Daniel Weiner Jan 26 '15 at 16:43
It's not as memory intensive. Your method is not optimised whatsoever. – makeitmorehuman Jan 26 '15 at 16:44
You are also not even clearing your timeouts when you're done. As I mentioned in real world cases they will just end up eating the memor. – makeitmorehuman Jan 26 '15 at 16:52
http://stackoverflow.com/questions/7391567/when-using-settimeout-do-you-have-to-cleartimeout – Daniel Weiner Jan 26 '15 at 16:53
When you want to know whether someone is outside your house would you rather install a buzzer so when someone wants to come in can buzz you or you rather constantly check out the window in case someone is showed up? – makeitmorehuman Jan 26 '15 at 16:55
You're completely right, events are better than checking with timeouts, but I wasn't aware that JavaScript had events triggered on attribute changes. So I basically rolled my own. – Daniel Weiner Jan 26 '15 at 17:02
@XGreen Edited to only have at most one setTimeout loop for multiple elements – Daniel Weiner Jan 26 '15 at 18:16

Listen to style change made to an element by an external app using jQuery

1 Answers1