Debounce

by Julien Roche

HTML

<input type="text" value="" />

<fieldset>
  <legend>Immediate = false</legend>
  <div id="immediateFalse"></div>
</fieldset>

<fieldset>
  <legend>Immediate = true</legend>
  <div id="immediateTrue"></div>
</fieldset>

Babel + JSX

const inputElement = document.querySelector('input');
const immediateFalse = document.querySelector('#immediateFalse');
const immediateTrue = document.querySelector('#immediateTrue');

function debounce(func, wait, immediate) {
  var timeout;

  return function executedFunction() {
    var context = this;
    var args = arguments;
	    
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };

    var callNow = immediate && !timeout;
	
    clearTimeout(timeout);

    timeout = setTimeout(later, wait);
	
    if (callNow) func.apply(context, args);
  };
}

function addValue(element, value) {
  element.innerHTML += value + '<br />';
}

const immediateFalseFunc = debounce(
	(value) => addValue(immediateFalse, value),
  250,
  false
);

const immediateTrueFunc = debounce(
	(value) => addValue(immediateTrue, value),
  250,
  true
);

inputElement.addEventListener(
	'input',
  (event) => {
		console.info('Typed:', event.target.value);
  	immediateFalseFunc(event.target.value);
    immediateTrueFunc(event.target.value);
  },
	false
);