JavaScript: как я могу предотвратить сбой пользователя setInterval/setTimeout?

Question

Чтобы увидеть проблему, нажмите на https://jsfiddle.net/kjz1myL2/16/, и, когда затухание закончено, переместите мышь с кнопки на кнопку ДЕЙСТВИТЕЛЬНО БЫСТРО.

Есть ли способ предотвратить аварийные ситуации или сбросить их при их сбое? Я сделал событие JavaScript, которое происходит с setInterval. Это помогает работать с замираниями. Это очень важная часть кода, но она срабатывает 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" />