CODEWITHSUNDEEP
jqueryloops
Maximilian Neuse
Maximilian Neuse

Reputation: 163

Stop function loop on click

I have a loop adding/removing the classes on the .master div:

function loopSlide(){
  setTimeout(function(){ $(".master").addClass("one") }, 0);
  setTimeout(function(){ $(".master").removeClass("one") }, 2000);
  setTimeout(function(){ $(".master").addClass("two") }, 2000);
  setTimeout(function(){ $(".master").removeClass("two") }, 4000);
  setTimeout(function(){ $(".master").addClass("three") }, 4000);
  setTimeout(function(){ $(".master").removeClass("three") }, 6000);
  setTimeout(loopSlide, 6000);
}
  
loopSlide()
.master div {
  display: none;
}

.master.one div:nth-child(1) {
  display: block;
}

.master.two div:nth-child(2) {
  display: block;
}

.master.three div:nth-child(3) {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="master">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Now I am looking for a way, how to stop the loop by clicking on one of the divs (1, 2, 3).

Fiddle

Upvotes: 0

Views: 64

Answers (2)

Paolo
Paolo

Reputation: 15827

reference = setTimeout() returns a value that lets you "cancel" the setTimeout's function execution via clearTimeout( reference )

Store the value returned by setTimeout() then let a click on the <div> clear the timeout

$('.master').on('click', function(evt) { clearTimeout( reference ); } );

Another approach would be to store inside a variable if the loop shoud proceed or not. Change the variable when the users clicks. Check the variable before setTimeout()

var proceed = true;
$('.master').on('click', proceed=false; } );

...

if( proceed ) setTimeout(...

The whole thing becomes

var proceed = true;

loopSlide();

function loopSlide(){
    setTimeout(function(){ $(".master").addClass("one") }, 0);
    setTimeout(function(){ $(".master").removeClass("one") }, 2000);
    setTimeout(function(){ $(".master").addClass("two") }, 2000);
    setTimeout(function(){ $(".master").removeClass("two") }, 4000);
    setTimeout(function(){ $(".master").addClass("three") }, 4000);
    setTimeout(function(){ $(".master").removeClass("three") }, 6000);
    if( proceed )
    {
        setTimeout(loopSlide, 6000);
    }
}

$('.master div').click(function (){
  proceed=false;
});

fiddle

Upvotes: 1

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

you can try below logic where you can retain class one, two and three and also stop the loop when click on div where you need to clear interval which is saved in a variable

$(document).ready(function(){
     var $master = $('.master');
     var $div = $('.master div');
     var $currentDiv = $('.master div:first');
     $currentDiv.addClass('one');

     var interval = setInterval(function(){
         var $next = $currentDiv.next();
         $master.removeClass('one two three');
         if($next.length>0) {
            $currentDiv = $next;
         } else {
            $currentDiv = $('.master div:first');
         }
         var index = $currentDiv.index();
         if(index == 0) {
           $master.addClass('one');
         } else if(index == 1) {
           $master.addClass('two');
         } else if(index ==2) {
           $master.addClass('three');
         }
  }, 2000);
  
   $div.on('click', function(){
     clearInterval(interval);
   
   });
  
  });
.master div {
  display: none;
}

.master.one div:nth-child(1) {
  display: block;
}

.master.two div:nth-child(2) {
  display: block;
}

.master.three div:nth-child(3) {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="master">
  <div >1</div>
  <div>2</div>
  <div>3</div>
</div>

Upvotes: 1

Related Questions