JavaScript: How Do I Prevent A User From Crashing setInterval / setTimeout Event?

Question

To see the problem click on https://jsfiddle.net/kjz1myL2/16/ and when the fade is complete move your mouse from button to button REALLY FAST.

Is there a way to prevent events from crashing or reset them when they crash? I made a JavaScript event that happens with setInterval. This helps work the fades. It is a very crucial part of the code, but it crashes SUPER EASILY! If a user switches between two elements too fast, it will crash the setInterval. I wanted to make a mouse pause event in which it stops the user's mouse or a mouse slow event that slows the mouse speed to the slowest possible speed until the setInterval is over, but people have stated that taking the control from the user is VERY DANGEROUS for VERY OBVIOUS REASONS. Not exploring that option, I decided to come here and ask for a more user-friendly solution to prevent the crash from happening. I have this code (PART OF THE CODE) [ADJUSTED]:

JavaScript

window.addEventListener("load", TourFunction);
var TourFadeInEvent;
var TourYesMouseEnterTimeEvent, TourNoMouseEnterTimeEvent;
var TourYesMouseEnterEvent, TourNoMouseEnterEvent;
var TourYesMouseLeaveEvent, TourNoMouseLeaveEvent;
Steps = 3;
TourFunction()
function TourFunction(){
    if (Steps == 3){
        Opacity = 0;
        TourFadeInEvent = window.setInterval(TourFadeIn, 20);
    }else{
        TourYesMouseEnterEvent = TourInputYes.addEventListener("mouseenter", TourYesMouseEnter);
        TourNoMouseEnterEvent = TourInputNo.addEventListener("mouseenter", TourNoMouseEnter);
    }
    function TourFadeIn(){
        if (Opacity <= 0 || Opacity < 1){
            Opacity = Opacity + .01;
            TourContainer.style.opacity = Opacity;
        }else{
            clearInterval(TourFadeInEvent);
            Steps += 1;
            TourFunction();
            return Steps;
        }
    }
    function TourYesMouseEnter(){
        TourYesMouseEnterTimeEvent = window.setInterval(TourYesMouseEnterTime, 10);
        function TourYesMouseEnterTime(){
            if (YesfgcR < 255){
                YesfgcR += 5;
                YesfgColor = "rgb(" + YesfgcR + ", " + YesfgcG + ", " + YesfgcB + ")";
                TourInputYes.style.color = YesfgColor;
            }if (YesbcR < 255){
                YesbcR += 5;
                YesbColor = "rgb(" + YesbcR + ", " + YesbcG + ", " + YesbcB + ")";
                TourInputYes.style.borderColor = YesbColor;
            }if (NofgcR > 0){
                NofgcR = 0;
                NofgColor = "rgb(" + NofgcR + ", " + NofgcG + ", " + NofgcB + ")";
                TourInputNo.style.color = NofgColor;
            }if (NobcR > 0){
                NobcR = 0;
                NobColor = "rgb(" + NobcR + ", " + NobcG + ", " + NobcB + ")";
                TourInputNo.style.borderColor = NobColor;
            }if (YesfgcR >= 255 && YesbcR >= 255 && NofgcR == 0 && NobcR == 0){
                clearInterval(TourYesMouseEnterTimeEvent);
                return YesfgcR, YesbcR, YesfgColor, YesbColor;
            }
        }
    }
    function TourNoMouseEnter(){
        TourNoMouseEnterTimeEvent = window.setInterval(TourNoMouseEnterTime, 10);
        function TourNoMouseEnterTime(){
            if (NofgcR < 255){
                NofgcR += 5;
                NofgColor = "rgb(" + NofgcR + ", " + NofgcG + ", " + NofgcB + ")";
                TourInputNo.style.color = NofgColor;
            }if (NobcR < 255){
                NobcR += 5;
                NobColor = "rgb(" + NobcR + ", " + NobcG + ", " + NobcB + ")";
                TourInputNo.style.borderColor = NobColor;
            }if (YesfgcR > 0){
                YesfgcR = 0;
                YesfgColor = "rgb(" + YesfgcR + ", " + YesfgcG + ", " + YesfgcB + ")";
                TourInputYes.style.color = YesfgColor;
            }if (YesbcR > 0){
                YesbcR = 0;
                YesbColor = "rgb(" + YesbcR + ", " + YesbcG + ", " + YesbcB + ")";
                TourInputYes.style.borderColor = YesbColor;
            }if (NofgcR >= 255 && NobcR >= 255 && YesfgcR == 0 && YesbcR == 0){
                clearInterval(TourNoMouseEnterTimeEvent);
                return NofgcR, NobcR, NofgColor, NobColor;
            }
        }
    }
}

The code runs fine if you don't switch from each button too fast but if you go to fast, it will crash. I have been experiencing this a lot and have not gotten an answer. PLEASE give me something to work off of.

My first thought is that it would probably work better if the variables you use to hold your interval ids (`TourYesMouseEnterTimeEvent1`, etc.) were defined inside the mouse event handler rather than in the outer (global?) scope. I think the way you have it, once the mouse has been moved over the button twice you've lost the reference to the first time's interval so it runs forever. Or maybe you should just be clearing the previous interval before starting a new one. — nnnnnn, Feb 16 '17 at 02:03
Well you could call `clearInterval()` immediately before calling `setInterval()`. (I'm not saying that would fix all of your problems, just that it would be one way to at least improve things.) You could also look into a ["debounce" mechanism](https://davidwalsh.name/javascript-debounce-function) for your mouse event handlers. — nnnnnn, Feb 16 '17 at 02:54

score 1 · Answer 1 · answered Feb 16 '17 at 01:25

1

Use CSS transitions for the color fade instead -

document.getElementById('Game1_TourInputYes').addEventListener('mouseover', switchActive);
document.getElementById('Game1_TourInputNo').addEventListener('mouseover', switchActive);

function switchActive(e) {
  var others = document.getElementsByClassName('btn-tour-input');
  for (let i = 0; i < others.length; i++) {
    others[i].classList.remove('active');
  }
  this.classList.add('active'); 
}

input[type=button] {
  background: transparent;
  border: 3px solid black;
  color: black;
  transition: all .4s ease-in-out;
  padding: 10px 30px;
}
input.active {
  border: 3px solid red;
  color: red;
}

<input class="btn-tour-input Tour_Input_Yes" id="Game1_TourInputYes" type="button" value="Yes" />
<input class="btn-tour-input Tour_Input_No" id="Game1_TourInputNo" type="button" value="No" />

answered Feb 16 '17 at 01:25

tklg

2,572
2
19
24

Why is it that CSS works but JavaScript doesn't work? – Bradley William Elko Feb 16 '17 at 01:27
And, do you think there is a JavaScript Solution or is JavaScript not powerful enough? – Bradley William Elko Feb 16 '17 at 01:28
You could try putting `clearInterval(TourNoMouseEnterTimeEvent);` at the start of `function TourYesMouseEnter() {` and `clearInterval(TourYesMouseEnterTimeEvent);` at the start of `function TourNoMouseEnter() {`. This will let only 1 interval run at once, instead of creating a stack of them by rapidly mousing over the buttons. – tklg Feb 16 '17 at 01:31
This does help delay it but if you go fast enough you can break it. – Bradley William Elko Feb 16 '17 at 01:37

JavaScript: How Do I Prevent A User From Crashing setInterval / setTimeout Event?

1 Answers1