I'm currently working on a function that gets activated by a mouse click, but there's a 10-second cooldown period using setTimeout() before it can be triggered again. However, after the timeout, my variable doesn't get set to the correct boolean value.
//Function called on every mouse click
@HostListener("document:click", ["$event"])
public documentClick() {
console.log("1: " + this.active);
//Only execute if active is true
if (this.active === true) {
//Setting active to false to prevent re-entry
this.active = false;
console.log("2: " + this.active);
//Wait for 10 seconds before setting active back to true
setTimeout(() => {
this.active = true;
console.log("3: " + this.active);
//Prints 'true' after 10 seconds
}, 10000);
}
}
After the timeout, the variable this.active is correctly set to true. But when I click again following the timeout, the console prints "1: false" instead of expecting "true".