用户单击并按住图片时停止超时

Question

我有一个画廊，它会向用户展示 5 到 5 秒的图片。

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/

我想在用户点击并按住 div 持有人的点击时暂停超时。 比如超时是3秒，如果用户点击并按住持有人的div我想在3秒内停止直到保持结束，然后再到4和5秒再次调用该函数。

我看到了这个函数，但我不知道如何在我的 slideSwitch() 中添加它。有什么想法吗？

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. 您需要设置定时器功能，它可以支持暂停和恢复
2. 需要设置anmatin可以支持暂停和恢复和重置（我用jquery queue & 动画）

最后的代码是： 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>

有一个 Var 叫 is_SpeedClick_getnext 设置为 true 你想设置 click to get next

注意：代码注释中的解释

Answer 2

如上所述，您不能暂停 setTimeout，但我有一个解决方案，我认为您可能会觉得有用。

我创建了第二个timer 函数，它有效地将幻灯片之前的剩余时间存储在#slideshow 元素中，作为每500ms 的一个属性。如果用户点击图像，那么它将取消原来的setTimeout 并暂停#slideshow 属性的更改，直到mouseup 事件发生。在触发mouseup 事件后，将使用属性中存储的剩余时间启动新的setTimeout。

我还添加了一行代码以从幻灯片末尾的第一张图片重新开始（不确定这是否是您的计划）。

希望对你有帮助

// 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>