È possibile avere un evento in JS che si attiva quando cambia il valore di una determinata variabile? JQuery è accettato.

Sì, ora è completamente possibile!

So che questo è un vecchio thread, ma ora questo effetto è possibile utilizzando gli accessor (getter e setter): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters

È possibile definire un oggetto come questo, in cui aInternalrappresenta il campo a:

x = {
  aInternal: 10,
  aListener: function(val) {},
  set a(val) {
    this.aInternal = val;
    this.aListener(val);
  },
  get a() {
    return this.aInternal;
  },
  registerListener: function(listener) {
    this.aListener = listener;
  }
}

Quindi è possibile registrare un listener utilizzando quanto segue:

x.registerListener(function(val) {
  alert("Someone changed the value of x.a to " + val);
});

Quindi ogni volta che qualcosa cambia il valore di x.a, la funzione listener verrà attivata. L'esecuzione della seguente riga porterà il popup di avviso:

x.a = 42;

Vedi un esempio qui: https://jsfiddle.net/5o1wf1bn/1/

Puoi anche utilizzare un array di listener invece di un singolo slot di ascolto, ma volevo darti l'esempio più semplice possibile.

La maggior parte delle risposte a questa domanda sono obsolete, inefficaci o richiedono l'inclusione di librerie gonfiate di grandi dimensioni:

• Object.watch e Object.observe sono entrambi deprecati e non devono essere utilizzati.
• onPropertyChange è un gestore di eventi dell'elemento DOM che funziona solo in alcune versioni di IE.
• Object.defineProperty ti consente di rendere immutabile una proprietà dell'oggetto, che ti permetterebbe di rilevare i tentativi di modifica, ma bloccherebbe anche eventuali cambiamenti.
• La definizione di setter e getter funziona, ma richiede molto codice di installazione e non funziona bene quando è necessario eliminare o creare nuove proprietà.

Oggi è ora possibile utilizzare l' oggetto Proxy per monitorare (e intercettare) le modifiche apportate a un oggetto. È appositamente costruito per ciò che l'OP sta cercando di fare. Ecco un esempio di base:

var targetObj = {};
var targetProxy = new Proxy(targetObj, {
  set: function (target, key, value) {
      console.log(`${key} set to ${value}`);
      target[key] = value;
      return true;
  }
});

targetProxy.hello_world = "test"; // console: 'hello_world set to test'

Gli unici inconvenienti Proxydell'oggetto sono:

1. L' Proxyoggetto non è disponibile nei browser meno recenti (come IE11) e il polyfill non è in grado di replicare completamente la Proxyfunzionalità.
2. Gli oggetti proxy non si comportano sempre come previsto con oggetti speciali (ad es. Date): L' Proxyoggetto è meglio abbinato a oggetti semplici o array.

Se è necessario osservare le modifiche apportate a un oggetto nidificato , è necessario utilizzare una libreria specializzata come Observable Slim (che ho pubblicato) che funziona in questo modo:

var test = {testing:{}};
var p = ObservableSlim.create(test, true, function(changes) {
    console.log(JSON.stringify(changes));
});

p.testing.blah = 42; // console:  [{"type":"add","target":{"blah":42},"property":"blah","newValue":42,"currentPath":"testing.blah",jsonPointer:"/testing/blah","proxy":{"blah":42}}]

No.

Ma, se è davvero così importante, hai 2 opzioni (la prima è testata, la seconda no):

Innanzitutto, usa setter e getter, in questo modo:

var myobj = {a : 1};

function create_gets_sets(obj) { // make this a framework/global function
    var proxy = {}
    for ( var i in obj ) {
        if (obj.hasOwnProperty(i)) {
            var k = i;
            proxy["set_"+i] = function (val) { this[k] = val; };
            proxy["get_"+i] = function ()    { return this[k]; };
        }
    }
    for (var i in proxy) {
        if (proxy.hasOwnProperty(i)) {
            obj[i] = proxy[i];
        }
    }
}

create_gets_sets(myobj);

allora puoi fare qualcosa del tipo:

function listen_to(obj, prop, handler) {
    var current_setter = obj["set_" + prop];
    var old_val = obj["get_" + prop]();
    obj["set_" + prop] = function(val) { current_setter.apply(obj, [old_val, val]); handler(val));
}

quindi imposta l'ascoltatore come:

listen_to(myobj, "a", function(oldval, newval) {
    alert("old : " + oldval + " new : " + newval);
}

In secondo luogo, in realtà ho dimenticato, presenterò mentre ci penso :)

EDIT: Oh, mi ricordo :) Potresti dare un'occhiata al valore:

Dato myobj sopra, con 'a' su di esso:

function watch(obj, prop, handler) { // make this a framework/global function
    var currval = obj[prop];
    function callback() {
        if (obj[prop] != currval) {
            var temp = currval;
            currval = obj[prop];
            handler(temp, currval);
        }
    }
    return callback;
}

var myhandler = function (oldval, newval) {
    //do something
};

var intervalH = setInterval(watch(myobj, "a", myhandler), 100);

myobj.set_a(2);

Utilizzo Prototype: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

// Console
function print(t) {
  var c = document.getElementById('console');
  c.innerHTML = c.innerHTML + '<br />' + t;
}

// Demo
var myVar = 123;

Object.defineProperty(this, 'varWatch', {
  get: function () { return myVar; },
  set: function (v) {
    myVar = v;
    print('Value changed! New value: ' + v);
  }
});

print(varWatch);
varWatch = 456;
print(varWatch);

<pre id="console">
</pre>

Altro esempio

// Console
function print(t) {
  var c = document.getElementById('console');
  c.innerHTML = c.innerHTML + '<br />' + t;
}

// Demo
var varw = (function (context) {
  return function (varName, varValue) {
    var value = varValue;
  
    Object.defineProperty(context, varName, {
      get: function () { return value; },
      set: function (v) {
        value = v;
        print('Value changed! New value: ' + value);
      }
    });
  };
})(window);

varw('varWatch'); // Declare
print(varWatch);
varWatch = 456;
print(varWatch);

print('---');

varw('otherVarWatch', 123); // Declare with initial value
print(otherVarWatch);
otherVarWatch = 789;
print(otherVarWatch);

<pre id="console">
</pre>

Mi dispiace di avere un vecchio thread, ma ecco un piccolo manuale per coloro che (come me!) Non vedono come funziona l'esempio di Eli Grey:

var test = new Object();
test.watch("elem", function(prop,oldval,newval){
    //Your code
    return newval;
});

Spero che questo possa aiutare qualcuno

Come la risposta di Luke Schafer ( nota : questo si riferisce al suo post originale; ma l'intero punto qui rimane valido dopo la modifica ), suggerirei anche un paio di metodi Get / Set per accedere al tuo valore.

Tuttavia suggerirei alcune modifiche (ed è per questo che sto postando ...).

Un problema con quel codice è che il campo adell'oggetto myobjè direttamente accessibile, quindi è possibile accedervi / modificarne il valore senza innescare i listener:

var myobj = { a : 5, get_a : function() { return this.a;}, set_a : function(val) { this.a = val; }}
/* add listeners ... */
myobj.a = 10; // no listeners called!

incapsulamento

Quindi, per garantire che gli ascoltatori siano effettivamente chiamati, dovremmo vietare l'accesso diretto al campo a. Come si fa? Usa una chiusura !

var myobj = (function() { // Anonymous function to create scope.

    var a = 5;            // 'a' is local to this function
                          // and cannot be directly accessed from outside
                          // this anonymous function's scope

    return {
        get_a : function() { return a; },   // These functions are closures:
        set_a : function(val) { a = val; }  // they keep reference to
                                            // something ('a') that was on scope
                                            // where they were defined
    };
})();

Ora puoi usare lo stesso metodo per creare e aggiungere gli ascoltatori come proposto da Luca, ma puoi essere certo che non c'è modo di leggere o scrivere per apassare inosservato!

Aggiunta di campi incapsulati a livello di codice

Sempre sulla pista di Luke, propongo ora un modo semplice per aggiungere campi incapsulati e rispettivi getter / setter agli oggetti mediante una semplice chiamata di funzione.

Si noti che funzionerà correttamente solo con tipi di valore . Affinché ciò funzioni con i tipi di riferimento , dovrebbe essere implementato un tipo di copia profonda (vedi questo , per esempio).

function addProperty(obj, name, initial) {
    var field = initial;
    obj["get_" + name] = function() { return field; }
    obj["set_" + name] = function(val) { field = val; }
}

Funziona come prima: creiamo una variabile locale su una funzione, quindi creiamo una chiusura.

Come usarlo? Semplice:

var myobj = {};
addProperty(myobj, "total", 0);
window.alert(myobj.get_total() == 0);
myobj.set_total(10);
window.alert(myobj.get_total() == 10);

Se stai usando jQuery {UI} (che tutti dovrebbero usare :-)), puoi usare .change () con un elemento <input /> nascosto.

AngularJS(So ​​che non lo è JQuery, ma ciò potrebbe aiutare. [Pure JS è buono solo in teoria]):

$scope.$watch('data', function(newValue) { ..

dove "data" è il nome della variabile nell'ambito.

C'è un collegamento a doc.

Per chi si sintonizza un paio di anni dopo:

È disponibile una soluzione per la maggior parte dei browser (e IE6 +) che utilizza l'evento onpropertychange e le nuove specifiche definisconoProProty. Il leggero problema è che dovrai trasformare la tua variabile in un oggetto dom.

Dettagli completi:

http://johndyer.name/native-browser-get-set-properties-in-javascript/

La funzionalità che stai cercando può essere raggiunta attraverso l'uso del metodo "defineProperty ()", che è disponibile solo per i browser moderni:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

Ho scritto un'estensione jQuery che ha alcune funzionalità simili se hai bisogno di più supporto tra browser:

https://github.com/jarederaj/jQueue

Una piccola estensione jQuery che gestisce i callback in coda per l'esistenza di una variabile, un oggetto o una chiave. È possibile assegnare un numero qualsiasi di richiamate a qualsiasi numero di punti dati che potrebbero essere interessati dai processi in esecuzione in background. jQueue ascolta e attende la data di esistenza di questi dati specificati, quindi avvia il callback corretto con i relativi argomenti.

Non direttamente: hai bisogno di una coppia getter / setter con un'interfaccia "addListener / removeListener" di qualche tipo ... o un plug-in NPAPI (ma questa è tutta un'altra storia).

//ex:
/*
var x1 = {currentStatus:undefined};
your need is x1.currentStatus value is change trigger event ?
below the code is use try it.
*/
function statusChange(){
    console.log("x1.currentStatus_value_is_changed"+x1.eventCurrentStatus);
};

var x1 = {
    eventCurrentStatus:undefined,
    get currentStatus(){
        return this.eventCurrentStatus;
    },
    set currentStatus(val){
        this.eventCurrentStatus=val;
      //your function();
    }
};

o

/*  var x1 = {
eventCurrentStatus:undefined,
currentStatus : {
    get : function(){
        return Events.eventCurrentStatus
        },
    set : function(status){
        Events.eventCurrentStatus=status;

    },
}*/
console.log("eventCurrentStatus = "+ x1.eventCurrentStatus);
x1.currentStatus="create"
console.log("eventCurrentStatus = "+ x1.eventCurrentStatus);
x1.currentStatus="edit"
console.log("eventCurrentStatus = "+ x1.eventCurrentStatus);
console.log("currentStatus = "+ x1.currentStatus);

o

/* global variable ku*/
    var jsVarEvents={};
    Object.defineProperty(window, "globalvar1", {//no i18n
        get: function() { return window.jsVarEvents.globalvarTemp},
        set: function(value) { window.window.jsVarEvents.globalvarTemp = value; }
    });
    console.log(globalvar1);
    globalvar1=1;
    console.log(globalvar1);

Una soluzione piuttosto semplice e semplicistica consiste nell'utilizzare semplicemente una chiamata di funzione per impostare il valore della variabile globale e non impostarne mai direttamente il valore. In questo modo hai il controllo totale:

var globalVar;

function setGlobalVar(value) {
    globalVar = value;
    console.log("Value of globalVar set to: " + globalVar);
    //Whatever else
}

Non c'è modo di imporre questo, richiede solo una disciplina di programmazione ... anche se puoi usare grep(o qualcosa di simile) per verificare che in nessun punto il tuo codice imposta direttamente il valore diglobalVar .

Oppure potresti incapsularlo in un oggetto e metodi getter e setter dell'utente ... solo un pensiero.

Per favore, ragazzi, ricordate che la domanda iniziale era per VARIABLES, non per OBJECTS;)

oltre a tutte le risposte sopra, ho creato una piccola lib chiamata forTheWatch.js , che usa lo stesso modo per catturare e richiamare le modifiche nelle normali variabili globali in javascript.

Compatibile con le variabili JQUERY, non è necessario utilizzare OBJECTS e, se necessario, è possibile passare direttamente un ARRAY di più variabili.

Se può essere utile ...: https://bitbucket.org/esabora/forthewatch
Fondamentalmente devi solo chiamare la funzione:
watchIt("theVariableToWatch", "varChangedFunctionCallback");

E scusa in anticipo se non pertinente.

Il modo più semplice che ho trovato, partendo da questa risposta :

// variable holding your data
const state = {
  count: null,
  update() {
    console.log(`this gets called and your value is ${this.pageNumber}`);
  },
  get pageNumber() {
    return this.count;
  },
  set pageNumber(pageNumber) {
    this.count = pageNumber;
    // here you call the code you need
    this.update(this.count);
  }
};

E poi:

state.pageNumber = 0;
// watch the console

state.pageNumber = 15;
// watch the console

Nel mio caso, stavo cercando di scoprire se qualsiasi libreria che stavo includendo nel mio progetto stava ridefinendo la mia window.player. Quindi, all'inizio del mio codice, ho appena fatto:

Object.defineProperty(window, 'player', {
  get: () => this._player,
  set: v => {
    console.log('window.player has been redefined!');
    this._player = v;
  }
});

Non è direttamente possibile.

Tuttavia, questo può essere fatto utilizzando CustomEvent: https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent

Il metodo seguente accetta una matrice di nomi di variabili come input e aggiunge un listener di eventi per ciascuna variabile e attiva l'evento per eventuali modifiche al valore delle variabili.

Il metodo utilizza il polling per rilevare la modifica del valore. È possibile aumentare il valore per il timeout in millisecondi.

function watchVariable(varsToWatch) {
    let timeout = 1000;
    let localCopyForVars = {};
    let pollForChange = function () {
        for (let varToWatch of varsToWatch) {
            if (localCopyForVars[varToWatch] !== window[varToWatch]) {
                let event = new CustomEvent('onVar_' + varToWatch + 'Change', {
                    detail: {
                        name: varToWatch,
                        oldValue: localCopyForVars[varToWatch],
                        newValue: window[varToWatch]
                    }
                });
                document.dispatchEvent(event);
                localCopyForVars[varToWatch] = window[varToWatch];
            }
        }
        setTimeout(pollForChange, timeout);
    };
    let respondToNewValue = function (varData) {
        console.log("The value of the variable " + varData.name + " has been Changed from " + varData.oldValue + " to " + varData.newValue + "!!!"); 
    }
    for (let varToWatch of varsToWatch) {
        localCopyForVars[varToWatch] = window[varToWatch];
        document.addEventListener('onVar_' + varToWatch + 'Change', function (e) {
            respondToNewValue(e.detail);
        });
    }
    setTimeout(pollForChange, timeout);
}

Chiamando il metodo:

watchVariables(['username', 'userid']);

Rileverà le modifiche alle variabili username e userid.

Con l'aiuto di getter e setter , puoi definire una classe JavaScript che fa una cosa del genere.

Innanzitutto, definiamo la nostra classe chiamata MonitoredVariable:

class MonitoredVariable {
  constructor(initialValue) {
    this._innerValue = initialValue;
    this.beforeSet = (newValue, oldValue) => {};
    this.beforeChange = (newValue, oldValue) => {};
    this.afterChange = (newValue, oldValue) => {};
    this.afterSet = (newValue, oldValue) => {};
  }

  set val(newValue) {
    const oldValue = this._innerValue;
    // newValue, oldValue may be the same
    this.beforeSet(newValue, oldValue);
    if (oldValue !== newValue) {
      this.beforeChange(newValue, oldValue);
      this._innerValue = newValue;
      this.afterChange(newValue, oldValue);
    }
    // newValue, oldValue may be the same
    this.afterSet(newValue, oldValue);
  }

  get val() {
    return this._innerValue;
  }
}

Supponiamo di voler ascoltare le moneymodifiche, creiamo un'istanza di MonitoredVariablecon soldi iniziali 0:

const money = new MonitoredVariable(0);

Quindi potremmo ottenere o impostare il suo valore usando money.val:

console.log(money.val); // Get its value
money.val = 2; // Set its value

Dal momento che non abbiamo definito alcun listener per questo, non succede nulla di speciale dopo le money.valmodifiche a 2.

Ora definiamo alcuni ascoltatori. Abbiamo quattro ascoltatori disponibili: beforeSet, beforeChange, afterChange, afterSet. Quanto segue avverrà in sequenza quando si utilizzamoney.val = newValue per modificare il valore della variabile:

1. money.beforeSet (newValue, oldValue);
2. money.beforeChange (newValue, oldValue); (Verrà ignorato se il suo valore non viene modificato)
3. money.val = newValue;
4. money.afterChange (newValue, oldValue); (Verrà ignorato se il suo valore non viene modificato)
5. money.afterSet (newValue, oldValue);

Ora definiamo afterChangelistener che verrà attivato solo dopo che money.valè stato modificato (mentre afterSetverrà attivato anche se il nuovo valore è uguale a quello precedente):

money.afterChange = (newValue, oldValue) => {
  console.log(`Money has been changed from ${oldValue} to ${newValue}`);
};

Ora imposta un nuovo valore 3e guarda cosa succede:

money.val = 3;

Vedrai quanto segue nella console:

Money has been changed from 2 to 3

Per il codice completo, consultare https://gist.github.com/yusanshi/65745acd23c8587236c50e54f25731ab .

Questo è un vecchio thread ma mi sono imbattuto nella seconda risposta più alta (ascoltatori personalizzati) mentre cercavo una soluzione usando Angular. Mentre la soluzione funziona, angular ha un modo migliore per risolverlo usando@Output emettitori di eventi. Uscendo dall'esempio nella risposta del listener personalizzato:

ChildComponent.html

<button (click)="increment(1)">Increment</button>

ChildComponent.ts

import {EventEmitter, Output } from '@angular/core';

@Output() myEmitter: EventEmitter<number> = new EventEmitter<number>();

private myValue: number = 0;

public increment(n: number){
  this.myValue += n;

  // Send a change event to the emitter
  this.myEmitter.emit(this.myValue);
}

ParentComponent.html

<child-component (myEmitter)="monitorChanges($event)"></child-component>
<br/>
<label>{{n}}</label>

ParentComponent.ts

public n: number = 0;

public monitorChanges(n: number){
  this.n = n;
  console.log(n);
}

Questo ora verrà aggiornato nsul genitore ogni volta che si fa clic sul pulsante figlio. Stackblitz funzionante

Utils = {
    eventRegister_globalVariable : function(variableName,handlers){
        eventRegister_JsonVariable(this,variableName,handlers);
    },
    eventRegister_jsonVariable : function(jsonObj,variableName,handlers){
        if(jsonObj.eventRegisteredVariable === undefined) {
            jsonObj.eventRegisteredVariable={};//this Object is used for trigger event in javascript variable value changes ku
        }
        Object.defineProperty(jsonObj, variableName , {
                    get: function() { 
                        return jsonObj.eventRegisteredVariable[variableName] },
                    set: function(value) {
                        jsonObj.eventRegisteredVariable[variableName] = value; handlers(jsonObj.eventRegisteredVariable[variableName]);}
                    });
            }