Выполнение стоп-кода при нажатии элемента

Question

Я пытаюсь создать ползунок, который выполняется, когда пользователи прокручиваются рядом с определенным элементом. В коде используется setTimeout для перехода от шага к другому. Проблема в том, что если пользователь нажимает .trigger, код проходит через последние шаги и испортит слайдер.

JS:

/ Footer timeline 
$(".trigger-1").click(function() { 
    event.preventDefault(); 
    $(".trigger").removeClass('active'); 
    $(".step").removeClass('active'); 
    $(".contact-us").removeClass('active'); 
    $(this).addClass('active'); 
    $(".step-1").addClass('active'); 
}); 

$(".trigger-2").click(function() { 
    event.preventDefault(); 
    $(".trigger").removeClass('active'); 
    $(".step").removeClass('active'); 
    $(".contact-us").removeClass('active'); 
    $(this).addClass('active'); 
    $(".step-2").addClass('active'); 
}); 

$(".trigger-3").click(function() { 
    event.preventDefault(); 
    $(".trigger").removeClass('active'); 
    $(".step").removeClass('active'); 
    $(".contact-us").removeClass('active'); 
    $(this).addClass('active'); 
    $(".step-3").addClass('active'); 
}); 

$(".trigger-4").click(function() { 
    event.preventDefault(); 
    $(".trigger").removeClass('active'); 
    $(".step").removeClass('active'); 
    $(".contact-us").removeClass('active'); 
    $(this).addClass('active'); 
    $(".step-4").addClass('active'); 
}); 

$(".trigger-5").click(function() { 
    event.preventDefault(); 
    $(".trigger").removeClass('active'); 
    $(".step").removeClass('active'); 
    $(this).addClass('active'); 
    $(".step-5").addClass('active'); 
    $(".contact-us").addClass('active'); 
}); 

// Trigger the slider 
var eventFired = false, 
    objectPositionTop = $('.footer').offset().top - 100; 

$(window).on('scroll', function() { 
    var currentPosition = $(document).scrollTop(); 
    if (currentPosition > objectPositionTop && eventFired === false) { 
     eventFired = true; 

     // Automatic slider 
     setTimeout(function() { 
      $(".step-1").removeClass('active'); 
      $(".step-2").addClass('active'); 
     }, 3000); 

     setTimeout(function() { 
      $(".step-2").removeClass('active'); 
      $(".step-3").addClass('active'); 
     }, 6000); 

     setTimeout(function() { 
      $(".step-3").removeClass('active'); 
      $(".step-4").addClass('active'); 
     }, 9000); 

     setTimeout(function() { 
      $(".step-4").removeClass('active'); 
      $(".step-5").addClass('active'); 
      $(".contact-us").addClass('active'); 
     }, 12000); 
    } 
}); 

HTML:

<div class="slider"> 
    <div class="slider-text"> 
     <div class="container-l"> 
      <div class="text-1"> 
       <span class="step step-count step-1 active">Step 1</span> 
       <span class="step step-count step-2">Step 2</span> 
       <span class="step step-count step-3">Step 3</span> 
       <span class="step step-count step-4">Step 4</span> 
       <span class="step step-count step-5">Step 5</span> 
       <h3 class="step step-title step-1 active">step</h3> 
       <h3 class="step step-title step-2">step</h3> 
       <h3 class="step step-title step-3">step</h3> 
       <h3 class="step step-title step-4">step</h3> 
       <h3 class="step step-title step-5">step</h3> 
       <a class="contact-us modal-trigger" href="#">Contact us!</a> 
      </div> 
     </div> 
    </div> 
    <div class="timeline"> 
     <div class="container"> 
      <div class="step step-1 active"></div> 
      <div class="step step-2"></div> 
      <div class="step step-3"></div> 
      <div class="step step-4"></div> 
      <div class="step step-5"></div> 
     </div> 
    </div> 
    <div class="timeline-steps"> 
     <div class="container"> 
      <a class="trigger step-1 trigger-1 active" href="#">1</a> 
      <a class="trigger step-2 trigger-2" href="#">2</a> 
      <a class="trigger step-3 trigger-3" href="#">3</a> 
      <a class="trigger step-4 trigger-4" href="#">4</a> 
      <a class="trigger step-5 trigger-5" href="#">5</a> 
     </div> 
    </div> 
</div> 

Answer 1

Я думаю, что вы должны добавить какой-то координации лексемы - переменная в общей объеме, которые указывают, если пользователь прерывания определенного сценария.

var userInterrupted = false; 

// when user make some action 
userInterrupted = true; 

, а затем добавить условие к каждой функции таймаута

setTimeout(
    function() 
    { 
     if (userInterrupted) { return; } 
     $(".step-2").removeClass('active'); 
     $(".step-3").addClass('active'); 
    }, 6000);