is it possible to check a window.variable object in realtime with javascript

Question

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

Answer 1

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>