<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" href="styles.css">
            <title> Debouncing Demo </title>
           <body>
               <h1> Debouncing Demo</h1>
               <p> No matter how many times you write something inside the input field the debounce function is getting called exactly once every 'delay' number of seconds.</p>
               <div id="counter">0</div>
               <input type="text" id="newsText"  onkeyup="debounceProductSearchCall(event)">
               <div id="news-container">
                  
                    <!-- Placeholder logic for the cards in this container-->
               </div>
           <script src="debouncing.js"></script>
            </body>
        </head>
    </html>
</html>
/*
  Author: Sashank Pindiproli 
  Name: debouncing.js
  Purpose: This file is used to get the results of the news api using debounce feature    
*/

let counter = 0;

const fetchCounter = () => {
  document.getElementById('counter').innerHTML = counter++;
}
const debounce = (fn, delay) => {
  let timer;
  return () => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn();
    }, delay);
  };
};

const debounceProductSearchCall = debounce(fetchCounter, 1000);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.