0

I've been looking into ways to detect when the value of an attribute changes to equal a specific value. MutationObserver seems to indicate only that the attribute value has changed as opposed to checking to see that is has changed and is equal to a specific value.

I have click event that runs a setTimeout of 200ms to call a function for a radial progress indicator. The value of the HTML attribute for the indicator counts up from 0 to 100 after the click and setTimeout. When it's complete, the HTML is as follows:

<div class="radial-progress" data-progress="100">

Is there a way that I can fire another function or run some other code when and only when data-progress == 100?

Here is the script:

$("#someID").on("click", function(event){
     event.preventDefault();

     // Load-progress counter //
     window.loadProgress = function() {
          $('.loadProgress .radial-progress').attr('data-progress', Math.floor(1 * 100));
     }
     setTimeout(window.loadProgress, 200);

     // Run some other code when data-progress == 100
});
DeJeEv143
  • 51
  • 1
  • 1
  • 4

1 Answers1

0

you could use a workaround trick by adding some arbitrary style to you div, some style that would not affect how it looks. Assign only this style when data-progress="100" 

div.radial-progress[data-progress="100"] {
  some-style:whatever;
}

and then use MutationObserver to monitor the style change.

Community
  • 1
  • 1
docliving
  • 111
  • 1
  • 6
  • Can MutationObserver detect a style change though, especially if it's not inline? I'm unsure of how this would work. – DeJeEv143 Mar 15 '17 at 14:30