CODEWITHSUNDEEP
jquery
Elena Politi
Elena Politi

Reputation: 181

Stopping a function jquery

I have the following code to show a series of images which should appear and then disappear one afte each other in the same div

("div#start").click(function() {
   myFunction();        
});
var myFunction = function(){

  $('#samplePhoto7').removeClass ('hide-pic');
       setTimeout(function(){
        $('#samplePhoto7').addClass('hide-pic');
      },2000)
        setTimeout(function(){
        $('#samplePhoto6').removeClass('hide-pic');
      },2000)
        setTimeout(function(){
        $('#samplePhoto6').addClass('hide-pic');
      },4000)
      setTimeout(function(){
        $('#samplePhoto4').removeClass('hide-pic');
      },4000)
        setTimeout(function(){
        $('#samplePhoto4').addClass('hide-pic');
      },6000)
      setTimeout(function(){
        $('#samplePhoto3').removeClass('hide-pic');
      },6000)
  };

I don't find a way to add a stop button in order to stop temporarly the function from running. I imagine I should use .queue and .clearqueue, but I don't find the proper way to implement it.

Upvotes: 0

Views: 35

Answers (2)

kapantzak
kapantzak

Reputation: 11750

You can try this approach.

First declare a list (queue) of images to be shown in specific order. Then start an interval and iterate this list.

Note that image 4 is intentionally left out of the iteration

var queue = ['1','2','3','5'];
var timer;

// Start interval
$('#btnStart').on('click', function() {
  timer = setInterval(function() {
    moveNext();
  }, 2000);
});

// Stop interval
$('#btnStop').on('click', function() {  
  clearInterval(timer);  
});

function moveNext() {
  var visible = $('.image:visible');
  var curId = visible.attr('data-id');
  visible.addClass('hide-pic');
  $('.image[data-id="' + getNextId(curId) + '"]').removeClass('hide-pic');
}

function getNextId(curId) {  
  var index = queue.indexOf(curId);
  if (index === queue.length - 1) {
    return queue[0];
  }
  return queue[index + 1];
}
.image {
  display: inline-block;
  padding: 50px;
  background-color: #ececec;
}
.hide-pic {
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="img1" class="image" data-id="1">Image 1</div>
<div id="img2" class="image hide-pic" data-id="2">Image 2</div>
<div id="img3" class="image hide-pic" data-id="3">Image 3</div>
<div id="img4" class="image hide-pic" data-id="4">Image 4</div>
<div id="img5" class="image hide-pic" data-id="5">Image 5</div>
<button id="btnStart" type="button">Start</button>
<button id="btnStop" type="button">Stop</button>

Upvotes: 1

akaBase
akaBase

Reputation: 2250

You want to keep the timer as a variable that when you want to stop looping you clear.

You will want to build on this so it fits your needs but you get the idea.

$("div#start").click(function() {
    myFunction();        
});
var interval;
var myFunction = function(){
    var imgCount = 7;
    interval = setInterval(function(){
        $('#samplePhoto' + imgCount).addClass('hide-pic');
        imgCount--;
        $('#samplePhoto' + imgCount).removeClass('hide-pic');
        if(imgCount == 3){
            clearInterval(interval);
        }
    }, 2000);
};  
$('#stop_btn').on('click', function(){
    clearInterval(interval);
});

Upvotes: 0

Related Questions