JavaScript:如何防止用户使 setInterval/setTimeout 事件崩溃？

Question

要查看问题，请单击 https://jsfiddle.net/kjz1myL2/16/当淡入淡出完成后，将鼠标从一个按钮快速移动到另一个按钮。

有没有办法防止事件崩溃或在事件崩溃时重置它们？我创建了一个通过 setInterval 发生的 JavaScript 事件。这有助于淡出效果。这是代码中非常关键的部分，但它非常容易崩溃!如果用户在两个元素之间切换得太快，setInterval 就会崩溃。我想制作一个鼠标暂停事件，其中它会停止用户的鼠标，或者制作一个鼠标慢速事件，将鼠标速度减慢到尽可能慢的速度，直到 setInterval 结束，但人们已经说过，采取由于非常明显的原因，来自用户的控制是非常危险的。我没有探索这个选项，而是决定来这里寻求一个更用户友好的解决方案来防止崩溃的发生。我有这个代码(部分代码)[调整]:

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;
            }
        }
    }
}

如果您从每个按钮切换的速度不是太快，则代码运行良好，但如果速度太快，代码就会崩溃。我已经经历过很多次了，但还没有得到答案。请给我一些工作。

Answer 1

使用 CSS 过渡来实现颜色淡入淡出 -

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" />