Stop timeout when user click and hold the picture

Question

I have a gallery, that will show pictures to user for 5 to 5 seconds.

function slideSwitch() {
  var current = $('#slideshow .active');
  current.removeClass('active');
  if (current.next().length) {
      current.next().addClass('active');
      myInterval = setTimeout(slideSwitch, 5000);
      bar();
  }

}

http://jsfiddle.net/6hcste51/

I'd like to pause the timeout when user click and hold the click on div holder. For example, the timeout is in 3 seconds, if user click and hold the holder div I'd like to stop in 3 seconds until the hold ends, and then go to 4 and 5 seconds to call the function again.

I saw this function but I don't know how to add it in my slideSwitch(). any ideas?

selector.addEventListener('mousedown', function(event) { 
  // simulating hold event
  setTimeout(function() {
    // You are now in a `hold` state, you can do whatever you like!
  }, 500);
}

Answer 1

1. you need to set timer function it can support pause and resume
2. need to set anmatin can support pause and resume and reset (i use jquery queue & animations)

At last the code will be : jsfiddle Link

//--------------------------global variables----------------
var isfirst= true;
var cycle_remaining = null;
var anim_time = 5000;//in mil sec
var downtime = null;
var myTimer = null;
var is_down = false;//is down event
var is_SpeedClick_getnext = false;//set to true you want to set click to get next image
//---------------------------timer-------------------------
function Timer(callback, delay) {
    var timerId, start, remaining = delay;
 cycle_remaining = remaining;
    this.pause = function() {
        window.clearTimeout(timerId);
        remaining -= new Date() - start;
        cycle_remaining = remaining;
    };

    this.resume = function() {
        start = new Date();
        window.clearTimeout(timerId);
        timerId = window.setTimeout(callback, remaining);
        cycle_remaining = remaining;
    };

    this.resume();
}


function slideSwitch() {
  var current = $('#slideshow .active');
  if (current.next().length) {
     current.removeClass('active');
   current.next().addClass('active');
    myTimer = new Timer(slideSwitch, 5000);
 resetanim();
    startanim();
  }
  
}


//--------------------- mouse control functions----------------------
$(document).on( "click", ".holder", function() {
 if(isfirst){
   isfirst = false;
   slideSwitch();
  } 
});
$('.holder').on('mouseout mouseup', function(e) {
    if(is_down && !isfirst){
     is_down = false;
     //set this if if you want to set click to get next image
     if(downtime > new Date() - 100 && is_SpeedClick_getnext){
   slideSwitch();
  }else{
   myTimer.resume();
        startanim();
  }
    }
});
$(".holder").mousedown(function() {
 if(!isfirst){
  downtime = new Date();
     is_down = true;
     myTimer.pause();
     puseanim();
   }

});
     
//--------------------- animation control functions----------------------
//start or resume animation
function startanim() {
  var myDiv = $( ".bottom_status" );
  myDiv.show( "slow" );
  myDiv.animate({
    width:"100%"
  },cycle_remaining );
  
  myDiv.queue(function() {
    var that = $( this );
    //that.addClass( "newcolor" );
    that.dequeue();
  });
}
function rutanim() {
  var myDiv = $( ".bottom_status" );
  myDiv.show( "slow" );
  myDiv.animate({
    width:"100%"
  }, anim_time );
  myDiv.queue(function() {
    var that = $( this );
    //that.addClass( "newcolor" );
    that.dequeue();
  });
}
//to puse animation
function puseanim() {
  var myDiv = $( ".bottom_status" );
  myDiv.clearQueue();
  myDiv.stop();
}

// to reset animation
function resetanim() {
  var myDiv = $( ".bottom_status" );
  myDiv.animate({
    width:"1%"
  }, 200 );
  myDiv.queue(function() {
    var that = $( this );
    that.dequeue();
  });
}

 .holder{
  display:none;
}

.active{
  display:block;
}

.bottom_status{
  position:absolute;
  bottom:0;
  background:blue;
  width:0%;
  height:10px;
  left: 0;
  margin-left: 0;
  padding: 0;
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id=slideshow>
<div class='holder active'>
Click here to start counting and click and hold to stop.
</div>

<div class='holder'>
text 2
</div>

<div class='holder'>
text 3
</div>

<div class='holder'>
text 4
</div>
</div>

<div class=bottom_status></div>

There is a Var called is_SpeedClick_getnext set to true you want to set click to get next

Note : the explanation in code comment

Answer 2

As mentioned you cant pause a setTimeout, but I have a solution which I think you might find useful.

I've created a second timer function that effectively stores the remaining time before a slide in the #slideshow element as an attribute every 500ms. If the user clicks on an image then it will cancel the original setTimeout and pauses the changing of the #slideshow attribute until the mouseup event. After the mouseup event is fired a new setTimeout is started using the remaining time stored in the attribute.

I also added a line of code to restart from the first image at the end of the slideshow (not sure if that's what you planned).

Hope this helps

// Start slider
slideSwitch();

// Start independent timer
timer();


function slideSwitch() {

  // Select active slide and remove active status
  var current = $('#slideshow .active');
  current.removeClass('active');

  // Check if there is a 'next' element and give active class, or return to first
  if (current.next().length) {
    current.next().addClass('active');
  } else {
    $("#slideshow img").first().addClass("active");
  }

  // Reset timer for the slide, store time and reset timer stop
  myInterval = setTimeout(slideSwitch, 3000);
  $("#slideshow").attr("time", "3000");
  $("#slideshow").attr("timeStop", "false");

}

function timer() {

  // Check if the slide countdown has been stopped
  if ($("#slideshow").attr("timeStop") != "true") {

    // Get last saved time and reduce by 500ms
    tempTime = parseInt($("#slideshow").attr("time") - 500);

    // Save time to slideshow attribute
    $("#slideshow").attr("time", tempTime)

    // Show countdown on label
    $("#timerLabel").text(tempTime);

  }

  // Continue timer
  myTimer = setTimeout(timer, 500);

}

// Add event for mousedown which cancels timer
$("#slideshow img").mousedown(function() {

  // Stop timer and clear countdown for slide
  $("#slideshow").attr("timeStop", "true");
  window.clearTimeout(myInterval);

});

// Start timer on mouse up
$("#slideshow img").mouseup(function() {

  // Restart a new countdown for slide using stored time remaining value
  tempTime = parseInt($("#slideshow").attr("time"));
  myInterval = setTimeout(slideSwitch, tempTime);
  $("#slideshow").attr("timeStop", "false");
});

img {
  display: none;
  border: 5px solid black;
}

img.active {
  display: inherit;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="slideshow" time="">
  <img src="https://via.placeholder.com/150/fff">
  <img src="https://via.placeholder.com/150/000" class="active">
  <img src="https://via.placeholder.com/150/f00">
  <img src="https://via.placeholder.com/150/0f0">
  <img src="https://via.placeholder.com/150/00f">
</div>

<p>Remaining: <span id="timerLabel"></span> ms</p>