<!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="src/style.css">
  </head>
  <body>
    <h1 id="header">Demo Debounce by 99phanmem</h1>
    <button onclick="handleAction();">Register</button>
  </body>
</html>
h1 {
  font-size: 14px;
  font-weight:bold;
  color: purple;
}
var time = null;
function debounce(fn, ms)
{
	
  //Kiem tra xem time neu = null thi setTimeout 
  if(time ===  null)
    time = setTimeout(fn, ms)
  else 
    {
    	console.log("Phat hien click nhieu lan")
      clearTimeout(time); //Khi ma da ton tai time thi minh xoa di
      time = null; 
      debounce(fn, ms); //Goi lai ham debounce
    }
}

function handleAction()
{
  console.log("Start action")
  debounce(function (){
  	alert('Register success')
    console.log('Send request!')
  }, 3000)
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.