JSFiddle - React, Tailwind, and code Playground

by mgibsonbr

HTML

<input id="myinput" type="text"></input>
<div id="watcher"></div>

JavaScript

jQuery.fn.watch = function( id, fn ) {
 
    return this.each(function(){
 
        var self = this;
 
        var oldVal = self[id];
        $(self).data(
            'watch_timer',
            setInterval(function(){
                if (self[id] !== oldVal) {
                    fn.call(self, id, oldVal, self[id]);
                    oldVal = self[id];
                }
            }, 100)
        );
 
    });
 
    return self;
};

var changes = 0;
function updateWatcher() {
    $("#watcher").text(changes + " changes");
    changes++;
}
updateWatcher();

$("#myinput").watch("value",updateWatcher);

setTimeout(function() { $("#myinput").val("after 2s"); }, 2000);
setTimeout(function() { $("#myinput").val("after 10s"); }, 10000);