How to clearTimeout onclick?

Question

I want to clear all setTimeouts in the loadStory function when the user clicks on a button with an a href link that brings them to the next webpage. However, the stopTimeout function doesn't get executed and the loadStory function continues loading onto the next page. How do I clear all setTimeouts to prevent it from continuing execution onto the next webpage?

//In TypeScript
var one, two, three;

function loadStory(){

function first() {
return new Promise(function(resolve, reject) {
one = setTimeout((function() {
$('#p1').append('The fox was riding a bicycle.');
resolve("Working");
}), 500);
});
}
function second() {
return new Promise(function(resolve, reject) {
two = setTimeout((function() {
$('#p2').append('It saw a tiger.');
resolve("Working");
}), 1200);
});
}
function third() {
return new Promise(function(resolve, reject) {
three = setTimeout((function() {
$('#p3').append('The fox ran away.');
resolve("Working");
}), 1200);
});

}

first().then(second).then(third);

}

function stopTimeout(){
clearTimeout(one);clearTimeout(two);clearTimeout(three);
alert("timeout executed");
}

<!--In HTML-->
<button onclick="loadStory()">Next</button>
<button><a href="page2.html" onclick="loadStory.stopTimeout()">Next</a></button>

Answer 1

You should run 3 sets of setTimeout functions at once, without Promise asynchronous function (adjust timeout periods accordingly). So Next could trigger cancel all while all the setTimeout functions are running

Answer 2

Thank you, Calviղ. It works now. I made the adjustments and some changes to my code.

//In TypeScript
var list = [];
function loadStory(){

let first = () => {
list.push(setTimeout(() => {
$('#p1').append('The fox was riding a bicycle.');
}, 500));
};
let second = () => {
list.push(setTimeout(() => {
$('#p2').append('It saw a tiger.');
}, 1700));
};
let third = () => {
list.push(setTimeout(() => {
$('#p3').append('The fox ran away.');
}, 2900));
};

first();second();third();
}

stopTimeout(){
for (let i=0; i<this.list.length;i++){
let x_timeout = this.list[i];
if (x_timeout!==undefined) clearTimeout(x_timeout);
}
}

<!--In HTML-->
<button onclick="loadStory()">Load</button>
<button><a href="page2.html" onclick="stopTimeout()">Next</a></button>

Answer 3

To make sure all timers are running,
Better have timer variables checking before run cancelTimeout
Eg.
if(one !== undefined) clearTimeout(one)

Answer 4

clearTimeout should cancel all the designated in progress setTimeout callback executions.

Perhaps you have pressed the Next button a bit late, since your timeout is only less than 3 secs, try to increase the timeout periods and test again.

Answer 5

Another reason why your timeout functions are still triggered, is due to you have pressed the Next button too early. Bear in mind second function only run later after the first function have completed. And third one run even much later, after first and second functions have completed.