How can I make a program wait for a variable change in javascript

Question

I want to force a JavaScript program to wait in some particular points of its execution until a variable has changed  Is there a way to do it  I have already found an extension that is called  narrative JavaScript  that force the program to wait until an event to happen  Is there a way to create a new event  a  variable change event  for example that behaves like onclick event

User · Answer

The question was posted long time ago  many answers pool the target periodically and produces unnecessary waste of resources if the target is unchanged  In addition  most answers do not block the program while waiting for changes as required by the original post   We can now apply a solution that is purely event-driven   The solution uses onClick event to deliver event triggered by value change   The solution can be run on modern browsers that support Promise and async await  If you are using Node js  consider EventEmitter as a better solution    x000D   x000D   lt  -- This div is the trick   -- gt  x000D   lt div id  trick  onclick  onTrickClick      gt  x000D   x000D   lt  -- Someone else change the value you monitored  In this case  the person will click this button  -- gt  x000D   lt button onclick  changeValue    gt Change value lt  button gt  x000D   x000D   lt script gt  x000D   x000D         targetObj x is the value you want to monitor  x000D      const targetObj     x000D           x  0  x000D          get x     x000D              return this  x  x000D             x000D          set x value    x000D              this  x   value  x000D                 The following line tells your code targetObj x has been changed  x000D              document getElementById  trick   click    x000D            x000D         x000D   x000D         Someone else click the button above and change targetObj x  x000D      function changeValue     x000D          targetObj x   targetObj x   1  x000D        x000D   x000D         This is called by the trick div  We fill the details later  x000D      let onTrickClick   function         x000D   x000D         Use Promise to help you  wait   This function is called in your code  x000D      function waitForChange     x000D          return new Promise resolve   gt    x000D              onTrickClick   function      x000D                  resolve    x000D                x000D              x000D        x000D   x000D         Your main code  must be in an async function   x000D       async      gt    x000D          while  true       The loop is not for pooling  It receives the change event passively  x000D              await waitForChange       Wait until targetObj x has been changed  x000D              alert targetObj x      Show the dialog only when targetObj x is changed  x000D              await new Promise resolve   gt  setTimeout resolve  0       Making the dialog to show properly  You will not need this line in your code  x000D            x000D            x000D   x000D   lt  script gt  x000D   x000D   x000D

User · Answer

JavaScript is one of the worst program scripting language ever    Wait  seems to be impossible in JavaScript   Yes  like in the real life  sometimes waiting is the best option    I tried  while  loop and  Recursion   a function calls itself repeatedly until       but JavaScript refuses to work anyway   This is unbelievable  but anyway  see the codes below    while loop    lt  DOCTYPE html gt    lt script gt   var Continue    no   setTimeout function   Continue    yes     5000        after 5 seconds   Continue  is changed to  yes   while Continue      no            while  loop will stop when  Continue  is changed to  yes  5 seconds later        the problem here is that  while  loop prevents the  setTimeout    to change  Continue  to  yes  5 seconds later       worse  the  while  loop will freeze the entire browser for a brief time until you click the  stop  script execution button   lt  script gt    Recursion    lt  DOCTYPE html gt   1234   lt script gt   function Wait If v c   if  window v      c  Wait If v c        Continue Code    no  setTimeout function   Continue Code    yes     5000        after 5 seconds   Continue Code  is changed to  yes   Wait If  Continue Code    no           the problem here  the javascript console trows the  too much recursion  error  because  Wait If    function calls itself repeatedly   document write   lt br gt 5678          this line will not be executed because of the  too much recursion  error above    lt  script gt

User · Answer

You can use properties   Object defineProperty MDN documentation  Example   function def varName  onChange        var  value       Object defineProperty this  varName            get  function                 return  value                     set  function value                if  onChange                  onChange  value  value                value   value                         return this varName      def  myVar   function  oldValue  newValue        alert  Old value      oldValue     nNew value      newValue        myVar   1     alert  Old value  undefined   New value  1 myVar   2     alert  Old value  1   New value  2

User · Answer

Super dated  but certainly good ways to accomodate this  Just wrote this up for a project and figured I d share  Similar to some of the others  varied in style   var ObjectListener   function prop  value       if  value     undefined  value   null     var obj             obj internal   value    obj watcher    function x         obj emit   function fn        obj watch   fn          var setter         setter enumerable   true    setter configurable   true    setter set   function x        obj internal   x      obj watcher x           var getter         getter enumerable   true    getter configurable   true    getter get   function         return obj internal          return  obj      Object defineProperty obj  prop  setter       Object defineProperty obj  prop  getter       obj emit  obj         user  licenseXYZ   ObjectListener testProp   user  licenseXYZ emit testLog    function testLog       return function         return console log            user  licenseXYZ testProp was updated to    value       join               user  licenseXYZ testProp   123

User · Answer

What worked for me  I looked all over the place and ended up using someone s jsfiddler   very slightly modifying it - worked nicely  was to set that variable to an object with a getter and setter  and the setter triggers the function that is waiting for variable change   var myVariableImWaitingOn   function  methodNameToTriggerWhenChanged       triggerVar   this      triggerVar val           triggerVar onChange   methodNameToTriggerWhenChanged      this SetValue value           if  value     undefined   amp  amp  value                     triggerVar val   value    modify this according to what you re passing in -               like a loop if an array that s only available for a short time  etc             triggerVar onChange      could also pass the val to the waiting function here               or the waiting function can just call myVariableImWaitingOn GetValue                        this GetValue            return triggerVar val

User · Answer

JavaScript interpreters are single threaded  so a variable can never change  when the code is waiting in some other code that does not change the variable   In my opinion it would be the best solution to wrap the variable in some kind of object that has a getter and setter function  You can then register a callback function in the object that is called when the setter function of the object is called  You can then use the getter function in the callback to retrieve the current value   function Wrapper callback        var value      this set   function v            value   v          callback this             this get   function             return value              This could be easily used like this    lt html gt   lt head gt   lt script type  text javascript  src  wrapper js  gt  lt  script gt   lt script type  text javascript  gt  function callback wrapper        alert  Value is now      wrapper get        wrapper   new Wrapper callback    lt  script gt   lt  head gt   lt body gt       lt input type  text  onchange  wrapper set this value    gt   lt  body gt   lt  html gt

User · Answer

No you would have to create your own solution  Like using the Observer design pattern or something   If you have no control over the variable or who is using it  I m afraid you re doomed  EDIT  Or use Skilldrick s solution   Mike

User · Answer

I would recommend a wrapper that will handle value being changed  For example you can have JavaScript function  like this    function Variable initVal  onChange        this val   initVal             Value to be stored in this object     this onChange   onChange       OnChange handler        This method returns stored value     this GetValue   function                   return this val               This method changes the value and calls the given handler            this SetValue   function value                this val   value          this onChange                And then you can make an object out of it that will hold value that you want to monitor  and also a function that will be called when the value gets changed  For example  if you want to be alerted when the value changes  and initial value  is 10  you would write code like this   var myVar   new Variable 10  function   alert  Value changed          Handler function   alert  Value changed      will be called  if you look at the code  when SetValue   is called   You can get value like so   alert myVar GetValue       You can set value like so   myVar SetValue 12     And immediately after  an alert will be shown on the screen  See how it works  http   jsfiddle net cDJsB

User · Answer

Alternatively  you can make a function that executes tasks based on the value of its  Static  variables  example below      lt  DOCTYPE html gt    lt div id  Time Box  gt  Time  lt  div gt    lt button type  button  onclick  Update Time  on    gt Update Time On lt  button gt   lt button type  button  onclick  Update Time  off    gt Update Time Off lt  button gt    lt script gt   var Update Time    function                                                                           var Static                      var  declares  Static  variable as static object in this function      return function  Option         var Local                    var  declares  Local  variable as local object in this function          if  typeof Option      string   Static Update   Option            if  Static Update      on            document getElementById  Time Box   innerText   Date             setTimeout function   Update Time     1000        update every 1 seconds                              Update Time  on         turns on time update   lt  script gt

User · Answer

Edit 2018  Please look into Object getters and setters and Proxies  Old answer below     a quick and easy solution goes like this   var something 999  var something cachedValue something   function doStuff         if something   something cachedValue     we want it to match         setTimeout doStuff  50    wait 50 millisecnds then recheck         return            something cachedValue something        real action    doStuff

[javascript] How can I make a program wait for a variable change in javascript?

Examples related to javascript

Examples related to variables

Examples related to wait