JSFiddle - React, Tailwind, and code Playground

by Michiel Helvensteijn

HTML

<script src="https://rawgithub.com/melanke/Watch.JS/master/src/watch.js"></script>

JavaScript

var ex = {
    attr: "foo"
};

var exAttrWatcher1Cnt = 0;
var exAttrWatcher2Cnt = 0;
var exWatcherCnt = 0;

//defining a 'watchers' for the object

WatchJS.watch(ex, 'attr', function(name, oldValue, newValue){
    exAttrWatcher1Cnt++;
    console.log('Call #' + exAttrWatcher1Cnt + ' for first watcher of ex.attr: ' + this.attr.toString());
});

WatchJS.watch(ex, 'attr', function(name, oldValue, newValue){
    exAttrWatcher2Cnt++;
    console.log('Call #' + exAttrWatcher2Cnt + ' for second watcher of ex.attr: ' + this.attr.toString());
});

WatchJS.watch(ex, function(name, oldValue, newValue){
    exWatcherCnt++;
    console.log('Call #' + exWatcherCnt + ' for ex: ' + this.attr.toString());
});

//when changing one of the attributes of the object multiple watchers are invoked
ex.attr = "bar";