JSFiddle - React, Tailwind, and code Playground

by Arthur Araújo

HTML

Hooks: <span id="hooks"></span> <br />
o.p value: <span id="results"></span> <br />
<span id="end" style="color:red"></span>

JavaScript

/*
 * object.watch polyfill
 *
 * 2012-04-03
 *
 * By Eli Grey, http://eligrey.com
 * Public Domain.
 * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
 */

// object.watch
if (!Object.prototype.watch) {
	Object.defineProperty(Object.prototype, "watch", {
		  enumerable: false
		, configurable: true
		, writable: false
		, value: function (prop, handler) {
			var
			  oldval = this[prop]
			, newval = oldval
			, getter = function () {
				return newval;
			}
			, setter = function (val) {
				oldval = newval;
				return newval = handler.call(this, prop, oldval, val);
			}
			;
			
			if (delete this[prop]) { // can't watch constants
				Object.defineProperty(this, prop, {
					  get: getter
					, set: setter
					, enumerable: true
					, configurable: true
				});
			}
		}
	});
}

// object.unwatch
if (!Object.prototype.unwatch) {
	Object.defineProperty(Object.prototype, "unwatch", {
		  enumerable: false
		, configurable: true
		, writable: false
		, value: function (prop) {
			var val = this[prop];
			delete this[prop]; // remove accessors
			this[prop] = val;
		}
	});
}




var o = { p: 1 };
var hooks = 0;

o.watch('p', function (id, oldval, newval) {
  hooks++;
  document.getElementById('results').innerHTML=o.p
  document.getElementById('hooks').innerHTML+=hooks
  return newval;
});

setInterval(function(){
   o.p = Math.floor((Math.random() * 10) + 1);
},1000);

setTimeout(function(){
	o.unwatch('p');
    document.getElementById('end').innerHTML="Script stoped!"
},11000);