Hear the alteration of the JavaScript variable

Question

Hear the alteration of the JavaScript variable

Suppose there exists a code snippet at point 2

var point2IsReady = true;

At point 1, I am tasked with implementing the following logic:

Once the value of point2IsReady is changed (to true), then display an alert saying 'ready!'.

Considerations:

The variable point2IsReady is not accessible in the scope of point 1.
The code at point 1 executes before the code at point 2 (or there may be a race condition).

Potential Solution 1

I propose using window.point2IsReady instead and employing setTimeout/setInterval at point 1 until the condition window.point2IsReady === true is met.

Any alternative suggestions? Implementing Listeners or Reacting to Variable Changes?

Note: Only the first occurrence of a change in place2IsReady needs to be tracked.

Can you think of a more optimal approach? Thank you.

javascript typescript scope window

Answer 1

Answer №1

To monitor changes in a variable, you can implement a listener using the setTimeout function, as shown below:

let place2IsReady = false;

setReadyListener();

// Simulating a 2-second wait before setting place2IsReady to true
// An alert should be triggered after 2 seconds
setTimeout(() => place2IsReady = true, 2000);

function setReadyListener() {
  const readyListener = () => {
    if (place2IsReady) {
      return alert("Ready!");
    }
    return setTimeout(readyListener, 250);
  };
  readyListener();
}

A more versatile listener 'factory' implementation 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...");

// Testing variable changes 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);
}

Alternatively, you may consider utilizing a Proxy with a set trap for monitoring variable changes:

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

To monitor changes in a variable, you can implement a listener using the setTimeout function, as shown below:

let place2IsReady = false;

setReadyListener();

// Simulating a 2-second wait before setting place2IsReady to true
// An alert should be triggered after 2 seconds
setTimeout(() => place2IsReady = true, 2000);

function setReadyListener() {
  const readyListener = () => {
    if (place2IsReady) {
      return alert("Ready!");
    }
    return setTimeout(readyListener, 250);
  };
  readyListener();
}

A more versatile listener 'factory' implementation 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...");

// Testing variable changes 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);
}

Alternatively, you may consider utilizing a Proxy with a set trap for monitoring variable changes:

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 3

Answer №2

If you were to substitute place2IsReady with an object:

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

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

place2IsReady.ready = true

Answer 4

If you were to substitute place2IsReady with an object:

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

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

place2IsReady.ready = true

Hear the alteration of the JavaScript variable

Answer №1

Answer №2

Similar questions

When using a Vue.js component, the value of this.$route can sometimes come back

Ways to retrieve form data from a dynamic CDKPortalComponent

Determine the value added tax in your online shopping basket

Transforming file location to base64 encoded format using TypeScript

Alignment of the table with a fixed header and scrollable body

enabling input field while making asynchronous requests with jQuery

Creating Multiple Routes in a Single TypeScript and AngularJS Route File

Error message: "The property or method you are trying to access is not defined

Is there a way to display just one element without affecting the other elements within the same class?

Is there a way to extract the query string from a file in order to query the database using ExpressJS?

360 Panoviewer in Three.js exhibits low image quality and pixelated textures

When attempting to access AJAX JSON properties using an index within a promise, the result returned is undefined

Tips for animating a nested array using jQuery

Unable to apply CSS styles to a form input using Ajax

Executing multiple JQuery post requests simultaneously

Notifying the chosen option using jQuery

Filtering JSON data in AngularJS is simple and effective

The response header does not contain a valid JWT token

Implement Angular's ng-show directive within Laravel

The content is not displayed in the d3 visualization