Skip to content

Instantly share code, notes, and snippets.

/index.html

Created April 23, 2015 13:32
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/1837f0a193b87a5ee750 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/1837f0a193b87a5ee750 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/fahowefuhu
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<span id="x"></span>
<script id="jsbin-javascript">
// sometimes you just want to know when a variable changed
function propertyChangeListener(property, parent, callback, original){
if(!parent || !property) return;
var name = property.split('.')[0];
var tail = property.substring(name.length + 1);
var val = parent[name], valid = typeof val !== "undefined";
var fullName = original || property, privateValue;
if(valid) delete parent[name];
Object.defineProperty(parent, name, {
set: function(x) {
var old = privateValue;
try{
if (tail) propertyChangeListener(tail, x, callback, fullName);
else if (callback) callback(x, old, fullName);
}
catch(err){
console.log("Error: " + fullName + " : " + JSON.stringify(err));
}
finally {
privateValue = x;
}
},
get: function() { return privateValue; }
});
// replace the value if it was present, to cascade the prop changes
if(valid) parent[name] = val;
}
// call it like this... this shouldn't be defined/done in production
propertyChangeListener("loaded.the.thing", window, function(now, old, full){
console.log("changed " + [now, old, full]); // could put breakpoint here
});
setTimeout(function(){ loaded = { the: { thing: 1 } }; }, 1000);
setTimeout(function(){ loaded.the= { thing: 2 }; }, 2000);
setTimeout(function(){ loaded.the.thing = 3; }, 3000);
setTimeout(function(){ loaded.the.thing = 4; }, 4000);
setInterval(function(){
var d = window.performance.now();
loaded.the.thing++;
console.log(window.performance.now() - d);
}, 5000);
propertyChangeListener("MyBlueHeaderLib.libs.$", window, function(now, old, full){
console.log("jQuery is assigned :" + [now, old]); // could put breakpoint here
});
</script>
<script id="jsbin-source-javascript" type="text/javascript">
// sometimes you just want to know when a variable changed
function propertyChangeListener(property, parent, callback, original){
if(!parent || !property) return;
var name = property.split('.')[0];
var tail = property.substring(name.length + 1);
var val = parent[name], valid = typeof val !== "undefined";
var fullName = original || property, privateValue;
if(valid) delete parent[name];
Object.defineProperty(parent, name, {
set: function(x) {
var old = privateValue;
try{
if (tail) propertyChangeListener(tail, x, callback, fullName);
else if (callback) callback(x, old, fullName);
}
catch(err){
console.log("Error: " + fullName + " : " + JSON.stringify(err));
}
finally {
privateValue = x;
}
},
get: function() { return privateValue; }
});
// replace the value if it was present, to cascade the prop changes
if(valid) parent[name] = val;
}
// call it like this... this shouldn't be defined/done in production
propertyChangeListener("loaded.the.thing", window, function(now, old, full){
console.log("changed " + [now, old, full]); // could put breakpoint here
});
setTimeout(function(){ loaded = { the: { thing: 1 } }; }, 1000);
setTimeout(function(){ loaded.the= { thing: 2 }; }, 2000);
setTimeout(function(){ loaded.the.thing = 3; }, 3000);
setTimeout(function(){ loaded.the.thing = 4; }, 4000);
setInterval(function(){
var d = window.performance.now();
loaded.the.thing++;
console.log(window.performance.now() - d);
}, 5000);
propertyChangeListener("MyBlueHeaderLib.libs.$", window, function(now, old, full){
console.log("jQuery is assigned :" + [now, old]); // could put breakpoint here
});</script></body>
</html>
Raw
jsbin.fahowefuhu.js
// sometimes you just want to know when a variable changed
function propertyChangeListener(property, parent, callback, original){
if(!parent || !property) return;
var name = property.split('.')[0];
var tail = property.substring(name.length + 1);
var val = parent[name], valid = typeof val !== "undefined";
var fullName = original || property, privateValue;
if(valid) delete parent[name];
Object.defineProperty(parent, name, {
set: function(x) {
var old = privateValue;
try{
if (tail) propertyChangeListener(tail, x, callback, fullName);
else if (callback) callback(x, old, fullName);
}
catch(err){
console.log("Error: " + fullName + " : " + JSON.stringify(err));
}
finally {
privateValue = x;
}
},
get: function() { return privateValue; }
});
// replace the value if it was present, to cascade the prop changes
if(valid) parent[name] = val;
}
// call it like this... this shouldn't be defined/done in production
propertyChangeListener("loaded.the.thing", window, function(now, old, full){
console.log("changed " + [now, old, full]); // could put breakpoint here
});
setTimeout(function(){ loaded = { the: { thing: 1 } }; }, 1000);
setTimeout(function(){ loaded.the= { thing: 2 }; }, 2000);
setTimeout(function(){ loaded.the.thing = 3; }, 3000);
setTimeout(function(){ loaded.the.thing = 4; }, 4000);
setInterval(function(){
var d = window.performance.now();
loaded.the.thing++;
console.log(window.performance.now() - d);
}, 5000);
propertyChangeListener("MyBlueHeaderLib.libs.$", window, function(now, old, full){
console.log("jQuery is assigned :" + [now, old]); // could put breakpoint here
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment