Disabling a function when another function is running.

I’m creating an interactive infographic whereby you click an icon, the other icons turn greyscale (by hiding colour icons with FadeOut and showing greyscale with FadeIn) then a piece of text will apear explaining the icon that was clicked on. Problem is you can click on an icon while another is part way through its transition and both will show at the same time.

Is there a way of disabling the functions assoscited with the other icons while another one is busy working through the variois hide and shows?

I have a very similar issue… I want an onViewportEnter event to be DISABLED when another onClick event is running…

But, apparently no one has responded to this query, even in two years?!

let shouldRunViewPortAction = true;
function doSomthing(){
shouldRunViewPortAction = false;
Promise.all([
/*some code to run here*/,
/*some code to run here*/,
]).finally(() =>  shouldRunViewPortAction= true);
}
$w("#myElement").onViewportEnter(event => {
if(shouldRunViewPortAction){
//code
}
})

Thanks for that, @J.D.
I’ll try to set-up my code with your suggestion… though, I am really a novice at coding - so, might need to come back to you for fore help!