<div class="container">
    <h2>Debounce Example – Typing Activity Tracker</h2>
    <input type="text" id="typingInput" placeholder="Start typing..." />
    <div>
        <p><strong>Key presses (without debounce):</strong> <span id="rawCount">0</span></p>
        <p><strong>Key presses (with debounce):</strong> <span id="debouncedCount">0</span></p>
    </div>
</div>
body {
  height: 100vh;
  display:flex;
}

.container {
    max-width: 400px;
    margin: 0 auto;
}

input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    margin-bottom: 20px;
}

p {
    font-size: 16px;
    margin: 8px 0;
}

const typingInput = document.getElementById('typingInput');
const rawCountEl = document.getElementById('rawCount');
const debouncedCountEl = document.getElementById('debouncedCount');

let rawCount = 0;
let debouncedCount = 0;

function debounce(fn, delay = 500) {
    let timeoutId;
    return (...args) => {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
            fn.apply(this, args);
        }, delay);
    };
}

typingInput.addEventListener('input', () => {
    rawCount++;
    rawCountEl.textContent = rawCount;
    debouncedInput();
});

const debouncedInput = debounce(() => {
    debouncedCount++;
    debouncedCountEl.textContent = debouncedCount;
}, 500);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.