4

Anyone know a way to control a variable in JavaScript in real time?

I'm implementing a code that in the face of automatic requests (signatures via pad) at some point when it arrives at the last signature must bring up a button (previously in hidden). The code of activate/disactivate is follow:

function checkButton() {
    var test = ClientInformation.WorkstepFinishCurrentlyAllowed;
    if (test == false) {
        $("#btnCustomFinish").addClass("hidden");
    } else {
        $("#btnCustomFinish").removeClass("hidden");
    }
}

I tried a solution using a setInterval () function that runs a check every few seconds but I do not find it very efficient.

setInterval(function() { 
    checkButton(); 
}, 500);

Does anyone know how to implement it through events, so that he is performing?

If necessary, use some code that automatically checks the variation in the value of the variables?

Regards

SavioZ
  • 109
  • 1
  • 1
  • 8
  • 1
    Possible duplicate of [Listening for variable changes in JavaScript](https://stackoverflow.com/questions/1759987/listening-for-variable-changes-in-javascript) – Maelig Jan 11 '19 at 09:35
  • The specified approaches do not work – SavioZ Jan 11 '19 at 09:41
  • I think you might want to look at Custom Events. Basically, the responsibility of notifying that something has changed lies with the process itself, and then it simply fires an event. You can set up a custom event listener at runtime, which will be notified once the variable is updated. But how is the `ClientInformation.WorkstepFinishCurrentlyAllowed` being populated? – Terry Jan 11 '19 at 10:30
  • One-liner : `$("#btnCustomFinish")[\`${test ? "remove" : "add"}Class\`]("hidden")` – Jeremy Thille Jan 11 '19 at 11:00
  • @Terry The ClientInformation.WorkstepFinishCurrentlyAllowed variable I do not know how it is populated, is a third-party application that intervenes in the code. There is no specific timeout, it is variable. I want to find a solution that moitors the variable in real time and when its value changes I want to activate a button ... – SavioZ Jan 11 '19 at 15:47

1 Answers1

0

One option would be to use a Proxy for ClientInformation instead, so that assignments to the WorkstepFinishCurrentlyAllowed property of ClientInformation result in toggling the class on the button:

const $btn = $("#btnCustomFinish");
const ClientInformation = new Proxy({}, {
  get(obj, prop) {
    return obj[prop];
  },
  set(obj, prop, val) {
    obj[prop] = val;
    if (prop !== 'WorkstepFinishCurrentlyAllowed') return;
    if (val) {
      $btn.removeClass("hidden");
    } else {
      $btn.addClass("hidden");
    }
  }
});
console.log('start');
setTimeout(() => ClientInformation.WorkstepFinishCurrentlyAllowed = true, 500);
setTimeout(() => ClientInformation.WorkstepFinishCurrentlyAllowed = false, 1000);
setTimeout(() => ClientInformation.WorkstepFinishCurrentlyAllowed = true, 1500);
setTimeout(() => ClientInformation.WorkstepFinishCurrentlyAllowed = false, 2000);
.hidden {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="btnCustomFinish" class="hidden">button</div>
CertainPerformance
  • 260,466
  • 31
  • 181
  • 209
  • Hello CertainPerformance, thanks for your response. As specified, i am looking for a solution that involves specific events, and not time-based approaches such as setinterval() or settimeout() since they are considered to be a bad impact on performance. Do you have any other suggestions? Thanks – SavioZ Jan 11 '19 at 09:40
  • Look at the code in the answer - that's exactly what it does, it listens to changes to the variable (to be more specific, to the property value). The `setTimeout`s there are just for demonstration purposes, so that a live demo can be seen in action. There is no polling going on, as you can see by the `setTimeout` callbacks, they're only reassigning the property, and the Proxy sees that reassignment and implements the desired showing and hiding functionality. – CertainPerformance Jan 11 '19 at 09:41
  • Thanks for your response. But when I execute code the page returned this error: Uncaught SyntaxError: Identifier 'ClientInformation' has already been declared. The variable that I want test is ClientInformation.WorkstepFinishCurrentlyAllowed. I have to change 'const ClientInformation' with another name? Sorry, but I'm not familiar with the code. – SavioZ Jan 11 '19 at 10:19
  • You can't declare a `const` variable name twice. Declare it only once, and make sure that anything that reassigns the property is reassigning the property on the proxy object. – CertainPerformance Jan 11 '19 at 10:38
  • Hi, thanks, but i'm a noobie to Javascript specifically. I tried to follow your example by renaming all the affected variables and specifically ClientInformation[WorkstepFinishCurrentlyAllowed], however this doesn't work, as it seems to get stuck right after the declaration of the constants. I'd appreciate a more tailored answer if possible. – SavioZ Jan 11 '19 at 15:39
  • If you started with `const ClientInformation = { foo: 'bar' }`, change that to something like `const ClientInformationObj = { foo: 'bar' }` and then pass it to `new Proxy`, eg `const ClientInformation = new Proxy(ClientInformationObj, ...`. – CertainPerformance Jan 11 '19 at 21:12