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过渡代替颜色渐变 -

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: