JSFiddle - React, Tailwind, and code Playground
HTML
<button>Unbind</button>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><...
CSS
button {
position: fixed;
left: 20px;
top: 20px;
}
JavaScript
var EventCallbackDebouncer = function(object, event, timeout) {
this.object = object;
this.event = event;
this.timeout = timeout;
// strip jQuery from object
if(this.object instanceof jQuery) {
this.object = this.object[0];
}
this.callbacks = [];
this._register_event();
};
EventCallbackDebouncer.prototype = {
add_callback : function(callback_func) {
this.callbacks.push(callback_func);
},
remove_callback : function(callback_func) {
for(var i = 0; i < this.callbacks.length; i++) {
if(this.callbacks[i] === callback_func) {
this.callbacks.splice(i, 1);
} else {
console.log("callback_func was not the same");
}
}
},
_debounce : function(func) {
var t = this, timeoutID;
return function() {
var scope = this, args = arguments;
clearTimeout(timeoutID);
timeoutID = setTimeout(function() {
func.apply(scope, Array.prototype.slice.call(args));
}, t.timeout);
};
},
_run_callbacks : function() {
var t = this;
for(var i = 0; i < t.callbacks.length; i++) {
t.callbacks[i]();
}
},
_register_event : function() {
var t = this;
$(t.object).on(t.event,
t._debounce(function() {
t._run_callbacks();
})
);
}
};
var debouncer = new EventCallbackDebouncer(window, "scroll", 50);
debouncer.add_callback(function() {
console.log("Scrolled");
});
$("button").click(function() {
debouncer.remove_callback(function() {
console.log("Scrolled");
});
});