Async preventDefault

Async preventDefault doesn't work :)

by David Iglesias

HTML

<div>
<label for="clickable">Check this: </label><br />
<input type="checkbox" id="clickable" />
</div>
<div>
<label for="delay">Async delay (<span id="delayOutput"></span>ms)</label><br />
<input type="range" min=-1 max=1000 value=100 id="delaySlider" />
</div>
<small>
Set delay to -1ms to handle the click event on the checkbox <strnog>synchronously</strnog>.
</small>

JavaScript

let handlingDelay;

clickable.addEventListener('click', (e) => {
  if (handlingDelay >= 0) {
    window.setTimeout(() => {
      handleEvent(e);
    }, handlingDelay);
  } else {
    handleEvent(e);
  }
});

function handleEvent(event) {
  event.preventDefault();
}

// eye candy

function updateDelay() {
  delayOutput.innerText = handlingDelay = delaySlider.value;
}
delaySlider.addEventListener('input', updateDelay);
updateDelay();