JSFiddle - React, Tailwind, and code Playground
HTML
<div id="noDebounceDisplay">
No Debounce:
</div>
<div id="debouncedDisplay">
Debounced:
</div>
JavaScript
var noDebounceDisplay = document.getElementById('noDebounceDisplay');
var debouncedDisplay = document.getElementById('debouncedDisplay');
var display = null;
var cnt = 0;
var original = function(c) {
display.textContent += c + ' ';
};
var debounced = _.debounce(original, 200);
function demoDebounced() {
display = debouncedDisplay;
var intervalId = setInterval(function() {
debounced(cnt++);
if (cnt > 20) {
clearInterval(intervalId);
}
}, 100);
}
function demoOriginal() {
display = noDebounceDisplay;
var intervalId = setInterval(function() {
original(cnt++);
if (cnt > 10) {
clearInterval(intervalId);
demoDebounced();
}
}, 100);
}
demoOriginal();