时间戳

首页 > 解决方案 > 用户单击并按住图片时停止超时

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

问题描述

我有一个画廊，它将向用户显示图片 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);
}

标签： javascriptjquery

解决方案

  1. 你需要设置定时器功能它可以支持暂停和恢复
  2. 需要设置 anmatin 可以支持暂停和恢复和重置（我使用jquery 队列和动画）

最后代码将是： 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_getnextset to true 你想设置 click to get next

注意：代码注释中的解释

推荐阅读