JSFiddle - React, Tailwind, and code Playground

by Ejaz Bawasa

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Abortable Listeners</title>
</head>

<body>
    <div>
        <button id="download">
            Download
        </button>
        <button id="abort">
            Abort
        </button>
    </div>
</body>

</html>

JavaScript

const controller = new AbortController();

const downloadButton = document.getElementById('download');
downloadButton.addEventListener('click', () => {
  console.log("DOWNLOAD CALLED", new Date());
}, {signal: controller.signal})

const abortButton = document.getElementById('abort');
abortButton.addEventListener('click', () => {
  console.log("ABORT CALLED!")
  controller.abort();
});