JSFiddle - React, Tailwind, and code Playground

by msfrisbie

JavaScript

class CancelToken {
  constructor(cancelFn) {
    this.promise = new Promise((resolve, reject) => {
      cancelFn(() => {
        console.log("delay cancelled");
        resolve();
      });
    });
  }
}

const startButton = document.querySelector('#start');
const cancelButton = document.querySelector('#cancel');

function cancellableDelayedResolve(delay) {
  console.log("set delay");
  
  return new Promise((resolve, reject) => {
    const id = setTimeout((() => {
      console.log("delayed resolve");
      resolve();
    }), delay);
    
    const cancelToken = new CancelToken((cancelCallback) => cancelButton.addEventListener("click", cancelCallback));
    
    cancelToken.promise.then(() => clearTimeout(id));
  });
}

startButton.addEventListener("click", () => cancellableDelayedResolve(1000));