Debounce

by Pankaj Parkar

HTML

<div id="app">
  
  <button type="button" onclick="javascript:db()">
    Click ON IT
  </button>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  text-align: center;
}

TypeScript

// it helps to improve subsequent calls 
// and make those calls after passed interval
function debounce(fn, timer) {
	// should call first time
	let firstTimeCalled = false;
  const timerExist = null;
	// then should call after timer
  return function() {
  	if (!firstTimeCalled) {
    	firstTimeCalled = true;
      fn();
    }
    if (timerExist) {
    	clearTimeout(timerExist);
    }
  	timerExist = setTimeout(fn, timer)
  }
}

function click() {
	console.log()
}

const test = () => {
	console.log('Called Called')
}
window.db = debounce(test, 1000);
console.log(db)
// document.querySelector("#app").innerHTML = greeter(user);