Listening for variable changes in JavaScript

后端 未结 22 2821
自闭症患者
自闭症患者 2020-11-21 06:57

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

相关标签:
22条回答
  • 2020-11-21 07:29

    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
    
    0 讨论(0)
  • 2020-11-21 07:30

    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.

    0 讨论(0)
  • 2020-11-21 07:33

    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.

    0 讨论(0)
  • 2020-11-21 07:33

    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.

    0 讨论(0)
提交回复
热议问题