JSFiddle - React, Tailwind, and code Playground

by Pankaj Kargirwar

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Debounce Example</title>
</head>
<body>
    <input type="text" id="input" placeholder="Type something...">

</body>
</html>

JavaScript

function debounce(func, wait) {
  let timeout;

  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };

    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

function logInput(event) {
  console.log('User input:', event.target.value);
}

const debouncedLogInput = debounce(logInput, 1000);


document.getElementById('input').addEventListener('input', debouncedLogInput);