Question 169989 in Javascript Question posted in
A very good W3school tutorial can be found here.

Can I create my own callback for a static variable in Javascript?

Sometimes function has built-in callback function, "This function is called when something happens"

In my case, I want to make callback function which is called after a certain static value is changed

For example,

class MyVariable(){
    static myVal = 1;
}


const FileUploader = (props) =>{
    myAlert(){
       console.log("val is changed!"); 
    }
    changeValue2(){
      MyVariable.myVal = 2;
      myAlert();
      
    }
    changeValue3(){
      MyVariable.myVal = 3; 
      myAlert();
    } 
    changeValue4(){
      MyVariable.myVal = 4; 
      myAlert();
    } 
}

I want to call myAlert() after myVal is changed.

so currently I write myAlert() third times.

I wonder is it possible to do this automatically like making the callback which is called when myVal is changed

Is there any way for this idea? I am using React

Tags:

3

Answers


  1. 0

    Since you are using a class you can include this method:

    class MyVariable(){
  static myVal = 1;
  static set myVal(value) {
   MyVariable.myVal = value;
   myAlert(){
       console.log("val is changed!"); 
    }
  }
}

    and you update myVal with the method instead.

    you can also make myVal a state const[myVal,setMyVal] = useState(1) and use setMyVal() to update it then add this useEffect:

    useEffect(() => {
  myAlert(){
       console.log("val is changed!"); 
    }
},[myVal])

    it will run each time myVal is updated.

    Login or Signup to reply.
  2. 0

    You could define a setter and use a private field to store the value.

    class MyVariable {
    static #myVal = 1;
    static get myVal() {
        return MyVariable.#myVal;
    }
    static set myVal(newVal) {
        if (newVal !== MyVariable.#myVal) {
            console.log('changing myVal to', newVal); // or call myAlert()
            MyVariable.#myVal = newVal;
        }
    }
}
console.log(MyVariable.myVal);
MyVariable.myVal = 2;
console.log(MyVariable.myVal);
    Login or Signup to reply.
  3. 0

    You can change myVal to a setter and also allow registering of listeners or subscribers. Then, when the value is changed, call the listeners from within the setter.

    class MyVariable {
  static #subscribers = [];
  static #myVal = 1;
  
  static set myVal(newVal) {
    const oldVal = this.#myVal;
    
    if (newVal !== oldVal) {
      this.#myVal = newVal;
      this.#subscribers.forEach((listener) => {
        listener(oldVal, newVal);
      });
    }
  }
  
  static get myVal() {
    return this.#myVal;
  }
  
  static subscribe(listener) {
    const idx = this.#subscribers.push(listener) - 1;
    
    // return an unsubscribe function
    return () => {
      this.#subscribers.splice(idx, 1);
    };
  }
}

const unsub = MyVariable.subscribe((oldVal, newVal) => {
  console.log(`val is changed! From ${oldVal} to ${newVal}`);
});

MyVariable.myVal = 2;
MyVariable.myVal = 3;

unsub();
MyVariable.myVal = 4; // no alert after unsubscribe
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search