JavaScript：如何防止用戶崩潰setInterval/setTimeout事件？

Question

要查看該問題，請單擊https://jsfiddle.net/kjz1myL2/16/，當淡入淡出完成時，將鼠標從按鈕移至按鈕，確實很快。

有沒有辦法可以防止事件在崩潰時崩潰或重置？我做了一個與setInterval發生的JavaScript事件。這有助於淡化。這是代碼中非常重要的部分，但它會讓SUPER EASILY更容易崩潰！如果用戶在兩個元素之間切換太快，則會使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" />