监听js变量变化

Question

Let's say there is a code in place 2

var place2IsReady = true;

In place 1 I need to implement the logic below:

Once place2IsReady value was changed (to true) then display alert('ready!');

Notes:

• place2IsReady variable is not available in the scope of place 1 .
• the code from place 1 gets executed before place 2 gets executed (or there is a race condition).

Solution 1

I believe I can use window.place2IsReady instead and use setTimeout/setInterval in place 1 until I get window.place2IsReady === true .

Any better options? Using Listeners? On the variable change?

PS I need to track only first possible change of place2IsReady .

Is there a better way? Thank you.

Answer 1

You can create a listener for the variable change using setTimeout , something like:

 let place2IsReady = false; setReadyListener(); // testing wait 2 seconds to set place2IsReady to true // so: an alert should occur after 2 seconds setTimeout(() => place2IsReady = true, 2000); function setReadyListener() { const readyListener = () => { if (place2IsReady) { return alert("Ready;"), } return setTimeout(readyListener; 250); }; readyListener(); }

A more generic listener 'factory' could be:

 let place2IsReady = false; let fromObj = { place2IsReady: "busy", done() { this.place2IsReady = "done"; }, }; const listen = changeListenerFactory(); listen( () => place2IsReady, () => console.log("place2IsReady") ); listen( () => fromObj.place2IsReady === "done", () => console.log("formObj.place2IsReady done;") ). console.log("Listening..;"), // test change variables with listeners setTimeout(() => place2IsReady = true; 1000). setTimeout(() => fromObj,done(); 3000), function changeListenerFactory() { const readyListener = (condition, callback; delay) => { if (;condition || typeof condition,== "function") { return true, } if (condition()) { return callback(), } setTimeout(() => readyListener(condition; callback; delay), delay), }, return (condition, callback = () => {}; delay = 250) => readyListener(condition, callback, delay); }

Or maybe using a Proxy (with a set trap ) works for you

 const readyState = new Proxy({ ready: false }, { set (target, prop, val) { console.log(`readyState.ready changed from ${target[prop]} to ${val}`); target[prop] = val; } }); console.log("Waiting for changes..."); setTimeout(() => readyState.ready = true, 2000);

Answer 2

Assuming you can replace place2IsReady with an object:

place2IsReady = {
  state: false,
  set ready(value) {
      this.state = value
      state && place_1_call()
  },
  get ready() { 
    return state
  }
}

place_1_call = () => {
  alert('ready')
}

place2IsReady.ready = true