How to call a Javascript function when value of a variable changes?

Question

Usually we call a Javascript function, when a button is click.

<button onclick=function1();>Post message</button>

Or sometimes, we may call a Javascript function at a particular time.

window.onload = myFunction();
          function myFunction()
           {
                 setInterval(function1,t);  
           }

where function1() is any Javascript function. I want to call this function only if value of a variable changes in the script.

For instance: Lets say I have a variable abc. Now value of that variable changes when I select something on the page using the function below.

var abc = function getSelectionHTML() {
      var userSelection;
      if (window.getSelection) {
        // W3C Ranges
        userSelection = window.getSelection ();
        // Get the range:
        if (userSelection.getRangeAt) {
          if (userSelection.rangeCount > 0)
        var range = userSelection.getRangeAt(0);
          else
        return '';
        } else {
          var range = document.createRange ();
          range.setStart (userSelection.anchorNode, userSelection.anchorOffset);
          range.setEnd (userSelection.focusNode, userSelection.focusOffset);
        }
        // And the HTML:
        var clonedSelection = range.cloneContents ();
        var div = document.createElement ('div');

        div.appendChild (clonedSelection);
        return div.innerHTML;
      } else if (document.selection) {
        // Explorer selection, return the HTML
        try {
          userSelection = document.selection.createRange ();
          return userSelection.htmlText;
        } catch (err) {
          return '';
        }
      } else {
        return '';
      }
    }

How to alert(abc) only when the value of variable changes? Please help!

CAFxX · Accepted Answer · 2012-11-17 06:40:14Z

2

If you are targeting "modern" browsers, you can use Object.defineProperty to define a setter function, i.e. a function that get's called every time you set the value of the corresponding field.

Since "global" variables in JS are simply members of the window object jou should be able to do something like

Object.defineProperty(window, "abc", { set: function(v) { 
  /* this is run every time abc is assigned a value: 
     the value being assigned can be found in v */
} } );

answered Nov 17, 2012 at 6:40

CAFxX

30.6k6 gold badges44 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lewis · Accepted Answer · 2014-10-24 02:50:37Z

2

Firstly, you need to define your variable abc with Custom Setters and Getters:

var value_of_abc;
 Object.defineProperty(window, 'abc', {
    get: function() {
      console.log('get!');
      return value_of_abc;
    },
    set: function(value) {
      console.log('set!');
      value_of_abc = value;
    }
  });

Then whenever you call or change variable abc, the thing down here will occur.

window.abc //get!
window.abc = 1 //set!

answered Oct 24, 2014 at 2:50

Lewis

15k14 gold badges70 silver badges88 bronze badges

Collectives™ on Stack Overflow

How to call a Javascript function when value of a variable changes?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related