Managing cancellation of an asynchronous task

I am using the Web Speech API to read out an array of words with a short delay between each one (a spelling test for my son!). I have defined an async function to speak a single word and used setTimeout() to delay the following word by 5 seconds. Everything is working as required, except when the START button is pressed immediately after the STOP button, before the 5 second timeout has resolved. This results in the whole array of words starting again, with the remaining words from the initial test threaded in between. I have tried to fix this by cancelling the setTimeout method and by disabling the START button while the timeout is active, but without success.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// initiate the synth
const synth = window.speechSynthesis;
// grab the UI elements
const startButton = document.querySelector("#start");
let started = false;
const stopButton = document.querySelector("#stop");
stopButton.disabled = true;
// listen to the stop button
stopButton.addEventListener("click", () => {
startButton.disabled = false;
stopButton.disabled = true;
started = false;
synth.cancel();
});
// get the voices
const voices = synth.getVoices();
const GBvoice = voices.filter((voice) => {
return voice.lang == "en-GB";
});
// speak a single word
async function speakWord(word) {
const utterThis = new SpeechSynthesisUtterance(word);
utterThis.voice = GBvoice[1];
utterThis.pitch = 1;
utterThis.rate = 1;
synth.speak(utterThis);
}
// define delay function
const addDelay = (t) => {
return new Promise((resolve) => {
setTimeout(resolve.bind(null), t);
});
};
// define the spelling words
const words = ["column", "solemn", "autumn", "foreign", "crescent", "spaghetti", "reign", "fascinating", "whistle", "thistle"];
// problem - when start button is pressed during timeout, two lists of words are spoken
startButton.onclick = async function () {
startButton.disabled = true;
stopButton.disabled = false;
started = true;
for (let word of words) {
await speakWord(word).then(addDelay.bind(null, 5000));
if (!started) {
break;
}
}
};

<!-- language: lang-html -->

<button id="stop">Stop</button>
<button id="start">Start</button>

<!-- end snippet -->

It may seem a little over-engineered, but here’s the cancellation route done using the AbortController API.

For clarity of presentation (and because I have no working speech synthesis in my browser), all parts related to speech synthesis were removed and replaced with a bare console.log, but you should be able to put them back easily.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let abc = null;
let jobCounter = 0;
const sleep = ms => new Promise(ok => setTimeout(ok, ms));
document.getElementById('btn.play').addEventListener('click', async ev => {
const job = ++jobCounter;
abc?.abort();
const myAbc = abc = new AbortController();
for (let i = 1; i <= 5; ++i) {
if (myAbc.signal.aborted)
break;
// await speakWord(...)
console.log(`job #${job} says: ${i}`);
await sleep(1000);
}
});
document.getElementById('btn.stop').addEventListener('click', ev => {
abc?.abort();
});

<!-- language: lang-html -->

<button id="btn.play">PLAY</button>
<button id="btn.stop">STOP</button>

<!-- end snippet -->

In essence: instead of using a bare flag variable, each ‘speech’ job creates a new object managing its own cancellation state, then puts that object in a global variable where it can be found by either button’s handler. Either button, when clicked, will cancel the current job, if there is one; the play button will then start a new job. This way, the ABA problem of the original approach is averted.

In this example you may be able to get away with replacing AbortController with something simpler (like a plain object with a cancelled property), but in the general case where you need to invoke other Web APIs (like fetch), you may need to have an AbortController at the ready after all.