ti-enxame.com

Como posso fazer um programa aguardar uma alteração variável no javascript?

Quero forçar um programa JavaScript a aguardar em alguns pontos específicos de sua execução até que uma variável seja alterada. Existe uma forma de fazer isso? Eu já encontrei uma extensão chamada "JavaScript narrativo" que força o programa a esperar até que um evento aconteça. Existe uma maneira de criar um novo evento, um "evento de alteração variável", por exemplo, que se comporte como o evento onclick.

57
Thanasis Petsas

Editar 2018: verifique getters e setters de objetos e Proxies. Antiga resposta abaixo:


uma solução rápida e fácil é assim:

var something=999;
var something_cachedValue=something;

function doStuff() {
    if(something===something_cachedValue) {//we want it to match
        setTimeout(doStuff, 50);//wait 50 millisecnds then recheck
        return;
    }
    something_cachedValue=something;
    //real action
}

doStuff();
85
aularon

Os intérpretes JavaScript são de thread único, portanto, uma variável nunca pode ser alterada quando o código está aguardando em algum outro código que não altera a variável.

Na minha opinião, seria a melhor solução para agrupar a variável em algum tipo de objeto que tenha uma função getter e setter. Você pode registrar uma função de retorno de chamada no objeto chamado quando a função setter do objeto é chamada. Você pode usar a função getter no retorno de chamada para recuperar o valor atual:

function Wrapper(callback) {
    var value;
    this.set = function(v) {
        value = v;
        callback(this);
    }
    this.get = function() {
        return value;
    }  
}

Isso poderia ser facilmente usado assim:

<html>
<head>
<script type="text/javascript" src="wrapper.js"></script>
<script type="text/javascript">
function callback(wrapper) {
    alert("Value is now: " + wrapper.get());
}

wrapper = new Wrapper(callback);
</script>
</head>
<body>
    <input type="text" onchange="wrapper.set(this.value)"/>
</body>
</html>
20
Reboot

Eu recomendaria um wrapper que manipulará o valor que está sendo alterado. Por exemplo, você pode ter a função JavaScript, assim:

​function Variable(initVal, onChange)
{
    this.val = initVal;          //Value to be stored in this object
    this.onChange = onChange;    //OnChange handler

    //This method returns stored value
    this.GetValue = function()  
    {
        return this.val;
    }

    //This method changes the value and calls the given handler       
    this.SetValue = function(value)
    {
        this.val = value;
        this.onChange();
    }


}

E então você pode criar um objeto que conterá o valor que deseja monitorar e também uma função que será chamada quando o valor for alterado. Por exemplo, se você quiser ser alertado quando o valor for alterado e o valor inicial for 10, escreva um código como este:

var myVar = new Variable(10, function(){alert("Value changed!");});

O manipulador function(){alert("Value changed!");} será chamado (se você olhar o código) quando SetValue() for chamado.

Você pode obter um valor assim:

alert(myVar.GetValue());

Você pode definir o valor da seguinte forma:

myVar.SetValue(12);

E imediatamente depois, um alerta será mostrado na tela. Veja como funciona: http://jsfiddle.net/cDJsB/

5
Cipi

Você pode usar as propriedades :

Documentação MDN do Object.defineProperty

Exemplo:

function def(varName, onChange) {
    var _value;

    Object.defineProperty(this, varName, {
        get: function() {
            return _value;
        },
        set: function(value) {
            if (onChange)
                onChange(_value, value);
            _value = value;
        }
    });

    return this[varName];
}

def('myVar', function (oldValue, newValue) {
    alert('Old value: ' + oldValue + '\nNew value: ' + newValue);
});

myVar = 1; // alert: Old value: undefined | New value: 1
myVar = 2; // alert: Old value: 1 | New value: 2
1
Eduardo Cuomo

A pergunta foi postada há muito tempo, muitas respostas agrupam a meta periodicamente e produz desperdício de recursos desnecessário se a meta não for alterada. Além disso, a maioria das respostas não bloqueia o programa enquanto aguarda as alterações, conforme exigido pela postagem original.

Agora podemos aplicar uma solução puramente orientada a eventos.

A solução usa o evento onClick para entregar o evento acionado pela alteração de valor.

A solução pode ser executada em navegadores modernos que oferecem suporte a Promise e assíncrono/espera. Se você estiver usando o Node.js, considere EventEmitter como uma solução melhor.

<!-- This div is the trick.  -->
<div id="trick" onclick="onTrickClick()" />

<!-- Someone else change the value you monitored. In this case, the person will click this button. -->
<button onclick="changeValue()">Change value</button>

<script>

    // targetObj.x is the value you want to monitor.
    const targetObj = {
        _x: 0,
        get x() {
            return this._x;
        },
        set x(value) {
            this._x = value;
            // The following line tells your code targetObj.x has been changed.
            document.getElementById('trick').click();
        }
    };

    // Someone else click the button above and change targetObj.x.
    function changeValue() {
        targetObj.x = targetObj.x + 1;
    }

    // This is called by the trick div. We fill the details later.
    let onTrickClick = function () { };

    // Use Promise to help you "wait". This function is called in your code.
    function waitForChange() {
        return new Promise(resolve => {
            onTrickClick = function () {
                resolve();
            }
        });
    }

    // Your main code (must be in an async function).
    (async () => {
        while (true) { // The loop is not for pooling. It receives the change event passively.
            await waitForChange(); // Wait until targetObj.x has been changed.
            alert(targetObj.x); // Show the dialog only when targetObj.x is changed.
            await new Promise(resolve => setTimeout(resolve, 0)); // Making the dialog to show properly. You will not need this line in your code.
        }
    })();

</script>
1
Homer Liu

O que funcionou para mim (procurei por todo o lado e acabei usando o jsfiddler de alguém/modificando-o levemente - funcionou bem) foi definir essa variável para um objeto com um getter e um setter, e o setter aciona a função que está esperando mudança de variável.

var myVariableImWaitingOn = function (methodNameToTriggerWhenChanged){
    triggerVar = this;
    triggerVar.val = '';
    triggerVar.onChange = methodNameToTriggerWhenChanged;
    this.SetValue(value){
        if (value != 'undefined' && value != ''){
            triggerVar.val = value; //modify this according to what you're passing in -
            //like a loop if an array that's only available for a short time, etc
            triggerVar.onChange(); //could also pass the val to the waiting function here
            //or the waiting function can just call myVariableImWaitingOn.GetValue()
        }
    };
    this.GetValue(){
        return triggerVar.val();
    };
 };
0
JakeJ

Super datado, mas certamente boas maneiras de acomodar isso. Acabei de escrever isso para um projeto e achei que eu compartilharia. Semelhante a alguns dos outros, variado em estilo.

var ObjectListener = function(prop, value) {

  if (value === undefined) value = null;

  var obj = {};    
  obj.internal = value;
  obj.watcher = (function(x) {});
  obj.emit = function(fn) {
    obj.watch = fn;
  };

  var setter = {};
  setter.enumerable = true;
  setter.configurable = true;
  setter.set = function(x) {
    obj.internal = x;
    obj.watcher(x);
  };

  var getter = {};
  getter.enumerable = true;
  getter.configurable = true;
  getter.get = function() {
    return obj.internal;
  };

  return (obj,
    Object.defineProperty(obj, prop, setter),
    Object.defineProperty(obj, prop, getter),
    obj.emit, obj);

};


user._licenseXYZ = ObjectListener(testProp);
user._licenseXYZ.emit(testLog);

function testLog() {
  return function() {
    return console.log([
        'user._licenseXYZ.testProp was updated to ', value
    ].join('');
  };
}


user._licenseXYZ.testProp = 123;
0
darcher

JavaScript é uma das piores linguagens de script de programas de todos os tempos!

"Esperar" parece ser impossível em JavaScript! (Sim, como na vida real, às vezes esperar é a melhor opção!)

Tentei o loop "while" e "Recursion" (uma função se chama repetidamente até ...), mas o JavaScript se recusa a funcionar de qualquer maneira! (Isso é inacreditável, mas de qualquer maneira, veja os códigos abaixo :)

loop while:

<!DOCTYPE html>

<script>

var Continue = "no";
setTimeout(function(){Continue = "yes";}, 5000);    //after 5 seconds, "Continue" is changed to "yes"

while(Continue === 'no'){};    //"while" loop will stop when "Continue" is changed to "yes" 5 seconds later

    //the problem here is that "while" loop prevents the "setTimeout()" to change "Continue" to "yes" 5 seconds later
    //worse, the "while" loop will freeze the entire browser for a brief time until you click the "stop" script execution button

</script>

Recursão:

<!DOCTYPE html>

1234

<script>

function Wait_If(v,c){
if (window[v] === c){Wait_If(v,c)};
};

Continue_Code = "no"
setTimeout(function(){Continue_Code = "yes";}, 5000);    //after 5 seconds, "Continue_Code" is changed to "yes"

Wait_If('Continue_Code', 'no');

    //the problem here, the javascript console trows the "too much recursion" error, because "Wait_If()" function calls itself repeatedly!

document.write('<br>5678');     //this line will not be executed because of the "too much recursion" error above!

</script>
0
User

Como alternativa, você pode criar uma função que execute tarefas com base no valor de suas variáveis ​​"Estáticas", exemplo abaixo:

enter image description here

<!DOCTYPE html>

<div id="Time_Box"> Time </div>

<button type="button" onclick='Update_Time("on")'>Update Time On</button>
<button type="button" onclick='Update_Time("off")'>Update Time Off</button>

<script>

var Update_Time = (function () {     //_____________________________________________________________

var Static = [];             //"var" declares "Static" variable as static object in this function

    return function (Option) {

    var Local = [];           //"var" declares "Local" variable as local object in this function

        if (typeof Option === 'string'){Static.Update = Option};

        if (Static.Update === "on"){
        document.getElementById("Time_Box").innerText = Date();

        setTimeout(function(){Update_Time()}, 1000);    //update every 1 seconds
        };

    };

})();  

Update_Time('on');    //turns on time update

</script>
0
User

Não, você teria que criar sua própria solução. Como usar o padrão de design do Observer ou algo assim.

Se você não tem controle sobre a variável ou quem a está usando, temo que esteja condenado. EDIT: Ou use a solução do Skilldrick!

Mike

0
Mike Gleason jr Couturier