Listening for variable changes in JavaScript

Question

Is it possible to have an event in JS that fires when the value of a certain variable changes  JQuery is accepted

User · Answer

If you re using jQuery  UI   which everyone should be using  -     you can use  change   with a hidden  lt input  gt  element

User · Answer

Recently found myself with the same issue  Wanted to listen for on change of a variable and do some stuff when the variable changed  Someone suggested a simple solution of setting the value using a setter  Declaring a simple object that keeps the value of my variable here  var variableObject         value  false      set  function  value            this value   value          this getOnChange             The object contains a set method via which I can change the value  But it also calls a getOnChange   method in there  Will define it now  variableObject getOnChange   function         if this value               do some stuff          Now whenever I do variableObject set true   the getOnChange method fires  and if the value was set as desired  in my case  true   the if block also executes  This is the simplest way I found to do this stuff

User · Answer

This is an old thread but I stumbled onto second highest answer  custom listeners  while looking for a solution using Angular  While the solution works  angular has a better built in way to resolve this using  Output and event emitters  Going off of the example in custom listener answer   ChildComponent html   lt button  click   increment 1   gt Increment lt  button gt    ChildComponent ts  import  EventEmitter  Output   from   angular core     Output   myEmitter  EventEmitter lt number gt    new EventEmitter lt number gt      private myValue  number   0   public increment n  number     this myValue    n        Send a change event to the emitter   this myEmitter emit this myValue       ParentComponent html   lt child-component  myEmitter   monitorChanges  event   gt  lt  child-component gt   lt br  gt   lt label gt   n   lt  label gt    ParentComponent ts  public n  number   0   public monitorChanges n  number     this n   n    console log n       This will now update non parent each time the child button is clicked  Working stackblitz

User · Answer

It s not directly possible   However  this can be done using CustomEvent  https   developer mozilla org en-US docs Web API CustomEvent CustomEvent  The below method accepts an array of variable names as an input and adds event listener for each variable and triggers the event for any changes to the value of the variables    The Method uses polling to detect the change in the value  You can increase the value for timeout in milliseconds   function watchVariable varsToWatch        let timeout   1000      let localCopyForVars           let pollForChange   function              for  let varToWatch of varsToWatch                if  localCopyForVars varToWatch      window varToWatch                     let event   new CustomEvent  onVar     varToWatch    Change                         detail                            name  varToWatch                          oldValue  localCopyForVars varToWatch                           newValue  window varToWatch                                                            document dispatchEvent event                   localCopyForVars varToWatch    window varToWatch                                   setTimeout pollForChange  timeout              let respondToNewValue   function  varData            console log  The value of the variable     varData name     has been Changed from     varData oldValue     to     varData newValue                      for  let varToWatch of varsToWatch            localCopyForVars varToWatch    window varToWatch           document addEventListener  onVar     varToWatch    Change   function  e                respondToNewValue e detail                         setTimeout pollForChange  timeout       By calling the Method   watchVariables   username    userid       It will detect the changes to variables username and userid

User · Answer

I came here looking for same answer for node js  So here it is const events   require  events    const eventEmitter   new events EventEmitter        Createing state to watch and trigger on change let x   10    x is being watched for changes in do while loops below  do       eventEmitter emit  back to normal      while  x     10    do       eventEmitter emit  something changed      while  x     10    What I am doing is setting some event emitters when values are changed and using do while loops to detect it

User · Answer

A rather simple and simplistic solution is to just use a function call to set the value of the global variable  and never set its value directly   This way you have total control   var globalVar   function setGlobalVar value        globalVar   value      console log  Value of globalVar set to      globalVar         Whatever else     There is no way to enforce this  it just requires programming discipline    though you can use grep  or something similar  to check that nowhere does your code directly set the value of globalVar   Or you could encapsulate it in an object and user getter and setter methods    just a thought

User · Answer

ex     var x1    currentStatus undefined   your need is x1 currentStatus value is change trigger event   below the code is use try it     function statusChange        console log  x1 currentStatus value is changed  x1 eventCurrentStatus       var x1         eventCurrentStatus undefined      get currentStatus            return this eventCurrentStatus             set currentStatus val           this eventCurrentStatus val          your function               or      var x1     eventCurrentStatus undefined  currentStatus         get   function            return Events eventCurrentStatus                set   function status           Events eventCurrentStatus status              console log  eventCurrentStatus      x1 eventCurrentStatus   x1 currentStatus  create  console log  eventCurrentStatus      x1 eventCurrentStatus   x1 currentStatus  edit  console log  eventCurrentStatus      x1 eventCurrentStatus   console log  currentStatus      x1 currentStatus     or     global variable ku       var jsVarEvents         Object defineProperty window   globalvar1      no i18n         get  function     return window jsVarEvents globalvarTemp           set  function value    window window jsVarEvents globalvarTemp   value                console log globalvar1       globalvar1 1      console log globalvar1

User · Answer

Utils         eventRegister globalVariable   function variableName handlers           eventRegister JsonVariable this variableName handlers              eventRegister jsonVariable   function jsonObj variableName handlers           if jsonObj eventRegisteredVariable     undefined                jsonObj eventRegisteredVariable      this Object is used for trigger event in javascript variable value changes ku                   Object defineProperty jsonObj  variableName                         get  function                              return jsonObj eventRegisteredVariable variableName                         set  function value                            jsonObj eventRegisteredVariable variableName    value  handlers jsonObj eventRegisteredVariable variableName

User · Answer

With the help of getter and setter  you can define a JavaScript class that does such a thing   First  we define our class called MonitoredVariable   class MonitoredVariable     constructor initialValue        this  innerValue   initialValue      this beforeSet    newValue  oldValue    gt          this beforeChange    newValue  oldValue    gt          this afterChange    newValue  oldValue    gt          this afterSet    newValue  oldValue    gt             set val newValue        const oldValue   this  innerValue         newValue  oldValue may be the same     this beforeSet newValue  oldValue       if  oldValue     newValue          this beforeChange newValue  oldValue         this  innerValue   newValue        this afterChange newValue  oldValue                newValue  oldValue may be the same     this afterSet newValue  oldValue          get val         return this  innerValue          Assume that we want to listen for money changes  let s create an instance of MonitoredVariable with initial money 0   const money   new MonitoredVariable 0     Then we could get or set its value using money val   console log money val      Get its value money val   2     Set its value   Since we have not defined any listeners for it  nothing special happens after money val changes to 2   Now let s define some listeners  We have four listeners available  beforeSet  beforeChange  afterChange  afterSet  The following will happen sequentially when you use money val   newValue to change variable s value    money beforeSet newValue  oldValue   money beforeChange newValue  oldValue    Will be skipped if its value not changed  money val   newValue  money afterChange newValue  oldValue    Will be skipped if its value not changed  money afterSet newValue  oldValue     Now we define afterChange listener which be triggered only after money val has changed  while afterSet will be triggered even if the new value is the same as the old one    money afterChange    newValue  oldValue    gt      console log  Money has been changed from   oldValue  to   newValue          Now set a new value 3 and see what happens   money val   3    You will see the following in the console   Money has been changed from 2 to 3   For full code  see https   gist github com yusanshi 65745acd23c8587236c50e54f25731ab

User · Answer

Sorry to bring up an old thread  but here is a little manual for those who  like me   don t see how Eli Grey s example works   var test   new Object    test watch  elem   function prop oldval newval         Your code     return newval        Hope this can help someone

User · Answer

The functionality you re looking for can be achieved through the use of the  defineProperty    method--which is only available to modern browsers   https   developer mozilla org en-US docs Web JavaScript Reference Global Objects Object defineProperty  I ve written a jQuery extension that has some similar functionality if you need more cross browser support   https   github com jarederaj jQueue     A small jQuery extension that handles queuing callbacks to the   existence of a variable  object  or key  You can assign any number of   callbacks to any number of data points that might be affected by   processes running in the background  jQueue listens and waits for   these data you specify to come into existence and then fires off the   correct callback with its arguments

User · Answer

Most of the answers to this question are either outdated  ineffective  or require the inclusion of large bloated libraries    Object watch and Object observe are both deprecated and should not be used  onPropertyChange is a DOM element event handler that only works in some versions of IE  Object defineProperty allows you to make an object property immutable  which would allow you to detect attempted changes  but it would also block any changes  Defining setters and getters works  but it requires a lot of setup code and it does not work well when you need to delete or create new properties    Today  you can now use the Proxy object to monitor  and intercept  changes made to an object  It is purpose built for what the OP is trying to do  Here s a basic example   var targetObj       var targetProxy   new Proxy targetObj      set  function  target  key  value          console log    key  set to   value           target key    value        return true           targetProxy hello world    test      console   hello world set to test    The only drawbacks of the Proxy object are     The Proxy object is not available in older browsers  such as IE11  and the polyfill cannot fully replicate Proxy functionality  Proxy objects do not always behave as expected with special objects  e g   Date  -- the Proxy object is best paired with plain Objects or Arrays    If you need to observe changes made to a nested object  then you need to use a specialized library such as Observable Slim  which I have published  which works like this   var test    testing      var p   ObservableSlim create test  true  function changes        console log JSON stringify changes         p testing blah   42     console      type   add   target    blah  42   property   blah   newValue  42  currentPath   testing blah  jsonPointer   testing blah   proxy    blah  42

User · Answer

Using Prototype  https   developer mozilla org en-US docs Web JavaScript Reference Global Objects Object defineProperty   x000D   x000D     Console x000D  function print t    x000D    var c   document getElementById  console    x000D    c innerHTML   c innerHTML     lt br   gt     t  x000D    x000D   x000D     Demo x000D  var myVar   123  x000D   x000D  Object defineProperty this   varWatch     x000D    get  function      return myVar     x000D    set  function  v    x000D      myVar   v  x000D      print  Value changed  New value      v   x000D      x000D      x000D   x000D  print varWatch   x000D  varWatch   456  x000D  print varWatch   x000D   lt pre id  console  gt  x000D   lt  pre gt  x000D   x000D   x000D    Other example   x000D   x000D     Console x000D  function print t    x000D    var c   document getElementById  console    x000D    c innerHTML   c innerHTML     lt br   gt     t  x000D    x000D   x000D     Demo x000D  var varw    function  context    x000D    return function  varName  varValue    x000D      var value   varValue  x000D     x000D      Object defineProperty context  varName    x000D        get  function      return value     x000D        set  function  v    x000D          value   v  x000D          print  Value changed  New value      value   x000D          x000D          x000D       x000D     window   x000D   x000D  varw  varWatch       Declare x000D  print varWatch   x000D  varWatch   456  x000D  print varWatch   x000D   x000D  print  ---    x000D   x000D  varw  otherVarWatch   123      Declare with initial value x000D  print otherVarWatch   x000D  otherVarWatch   789  x000D  print otherVarWatch   x000D   lt pre id  console  gt  x000D   lt  pre gt  x000D   x000D   x000D

User · Answer

Please guys remember the initial question was for VARIABLES  not for OBJECTS     in addition to all answers above  I created a tiny lib called forTheWatch js   that use the same way to catch and callback for changes in normal global variables in javascript   Compatible with JQUERY variables  no need to use OBJECTS  and you can pass directly an ARRAY of several variables if needed   If it can be helpful      https   bitbucket org esabora forthewatch Basically you just have to call the function    watchIt  theVariableToWatch    varChangedFunctionCallback     And sorry by advance if not relevant

User · Answer

Not directly  you need a pair getter setter with an  addListener removeListener  interface of some sort    or an NPAPI plugin  but that s another story altogether

User · Answer

This is what I did  Call JSON stringify twice and compare the two strings    Drawbacks   You can only know whether the whole object changes You have to detect changes manually You better have only primitive fields in the object no properties  no functions

User · Answer

In my case  I was trying to find out if any library I was including in my project was redefining my window player  So  at the begining of my code  I just did   Object defineProperty window   player       get       gt  this  player    set  v   gt        console log  window player has been redefined         this  player   v

User · Answer

No  But  if it s really that important  you have 2 options  first is tested  second isn t   First  use setters and getters  like so  var myobj    a   1    function create gets sets obj       make this a framework global function     var proxy          for   var i in obj             if  obj hasOwnProperty i                 var k   i              proxy  quot set  quot  i    function  val    this k    val                 proxy  quot get  quot  i    function         return this k                          for  var i in proxy            if  proxy hasOwnProperty i                 obj i    proxy i                      create gets sets myobj    then you can do something like  function listen to obj  prop  handler        var current setter   obj  quot set  quot    prop       var old val   obj  quot get  quot    prop         obj  quot set  quot    prop    function val    current setter apply obj   old val  val    handler val       then set the listener like  listen to myobj   quot a quot   function oldval  newval        alert  quot old    quot    oldval    quot  new    quot    newval      Second  you could put a watch on the value  Given myobj above  with  a  on it  function watch obj  prop  handler       make this a framework global function     var currval   obj prop       function callback             if  obj prop     currval                var temp   currval              currval   obj prop               handler temp  currval                       return callback     var myhandler   function  oldval  newval          do something     var intervalH   setInterval watch myobj   quot a quot   myhandler   100    myobj set a 2

User · Answer

Easiest way I have found  starting from this answer       variable holding your data const state       count  null    update         console log  this gets called and your value is   this pageNumber            get pageNumber         return this count         set pageNumber pageNumber        this count   pageNumber         here you call the code you need     this update this count            And then    state pageNumber   0     watch the console  state pageNumber   15     watch the console

User · Answer

Yes  this is now completely possible   I know this is an old thread but now this effect is possible using accessors  getters and setters   https   developer mozilla org en-US docs Web JavaScript Guide Working with Objects Defining getters and setters  You can define an object like this  in which aInternal represents the field a   x       aInternal  10    aListener  function val        set a val        this aInternal   val      this aListener val          get a         return this aInternal         registerListener  function listener        this aListener   listener          Then you can register a listener using the following   x registerListener function val      alert  Someone changed the value of x a to     val         So whenever anything changes the value of x a  the listener function will be fired  Running the following line will bring the alert popup   x a   42    See an example here  https   jsfiddle net 5o1wf1bn 1   You can also user an array of listeners instead of a single listener slot  but I wanted to give you the simplest possible example

User · Answer

As Luke Schafer s answer  note  this refers to his original post  but the whole point here remains valid after the edit   I would also suggest a pair of Get Set methods to access your value  However I would suggest some modifications  and that s why I m posting      A problem with that code is that the field a of the object myobj is directly accessible  so it s possible to access it   change its value without triggering the listeners  var myobj     a   5  get a   function     return this a    set a   function val    this a   val        add listeners        myobj a   10     no listeners called   Encapsulation So  to guarantee that the listeners are actually called  we would have to prohibit that direct access to the field a  How to do so  Use a closure  var myobj    function        Anonymous function to create scope       var a   5                 a  is local to this function                              and cannot be directly accessed from outside                              this anonymous function s scope      return           get a   function     return a          These functions are closures          set a   function val    a   val        they keep reference to                                                something   a   that was on scope                                                where they were defined               Now you can use the same method to create and add the listeners as Luke proposed  but you can rest assured that there s no possible way to read from or write to a going unnoticed  Adding encapsulated fields programmatically Still on Luke s track  I propose now a simple way to add encapsulated fields and the respective getters setters to objects by the means of a simple function call  Note that this will only work properly with value types  For this to work with reference types  some kind of deep copy would have to be implemented  see this one  for instance   function addProperty obj  name  initial        var field   initial      obj  quot get  quot    name    function     return field        obj  quot set  quot    name    function val    field   val       This works the same as before  we create a local variable on a function  and then we create a closure  How to use it  Simple  var myobj       addProperty myobj   quot total quot   0   window alert myobj get total      0   myobj set total 10   window alert myobj get total      10

User · Answer

For those tuning in a couple years later   A solution for most browsers  and IE6   is available that uses the onpropertychange event and the newer spec defineProperty   The slight catch is that you ll need to make your variable a dom object   Full details   http   johndyer name native-browser-get-set-properties-in-javascript

User · Answer

AngularJS  I know this is not JQuery  but that might help   Pure JS is good in theory only      scope  watch  data   function newValue         where  data  is name of your variable in the scope   There is a link to doc

[javascript] Listening for variable changes in JavaScript

Examples related to javascript

Examples related to jquery

Examples related to dom-events