Question

我正在做老虎机，我想在有人点击添加或时显示行减去一条线。我使用以下代码;问题是，当有人快速点击（比延迟时间更快）时，它会产生比预期更大的延迟。这是一个演示（和JSFiddle）

＆＃13;

function arrowNumbers(id,min,max,difference){
	if ((min === undefined) || (min < 0)){
		min = 1;
	}
	if((difference === undefined)) {
		difference = 1;
	}
	var previousArrow = $('.'+id+' .previous');
	var nextArrow = $('.'+id+' .next');

	var screenNumbers = $('.'+id+' span');
	var actualNumber = $('.'+id+' span').text();

	var n = actualNumber;

	previousArrow.click(function(){
		if (n>min){
			if (parseInt(difference)>=parseInt(n))
				n = min;
			else
				n = parseInt(n)-parseInt(difference);
			showNumber(n);
			if (id=='line')
				showLines(n);
		}
	});

	nextArrow.click(function(){
		if (n<max){
			if (parseInt(difference)+parseInt(n)>max)
				n = max;
			else
				n = parseInt(n)+parseInt(difference);
			showNumber(n);
			if (id=='line')
				showLines(n);
		}
	});

	function showNumber(n){
		screenNumbers.text(n);
	}
}

function showLines(lines){
	var container = 'lines';
	var t = 1000;
	switch (lines) {
		case 20: $('.'+container+' .l.l-20').show(0).delay(t).hide(0);
		case 19: $('.'+container+' .l.l-19').show(0).delay(t).hide(0);
		case 18: $('.'+container+' .l.l-18').show(0).delay(t).hide(0);
		case 17: $('.'+container+' .l.l-17').show(0).delay(t).hide(0);
		case 16: $('.'+container+' .l.l-16').show(0).delay(t).hide(0);
		case 15: $('.'+container+' .l.l-15').show(0).delay(t).hide(0);
		case 14: $('.'+container+' .l.l-14').show(0).delay(t).hide(0);
		case 13: $('.'+container+' .l.l-13').show(0).delay(t).hide(0);
		case 12: $('.'+container+' .l.l-12').show(0).delay(t).hide(0);
		case 11: $('.'+container+' .l.l-11').show(0).delay(t).hide(0);
		case 10: $('.'+container+' .l.l-10').show(0).delay(t).hide(0);
		case 9: $('.'+container+' .l.l-9').show(0).delay(t).hide(0);
		case 8: $('.'+container+' .l.l-8').show(0).delay(t).hide(0);
		case 7: $('.'+container+' .l.l-7').show(0).delay(t).hide(0);
		case 6: $('.'+container+' .l.l-6').show(0).delay(t).hide(0);
		case 5: $('.'+container+' .l.l-5').show(0).delay(t).hide(0);
		case 4: $('.'+container+' .l.l-4').show(0).delay(t).hide(0);
		case 3: $('.'+container+' .l.l-3').show(0).delay(t).hide(0);
		case 2: $('.'+container+' .l.l-2').show(0).delay(t).hide(0);
		case 1: $('.'+container+' .l.l-1').show(0).delay(t).hide(0);
	}
}

arrowNumbers('line',1,20);

＆＃13;

.lines {
  width: 500px;
  height: 200px;
}

.lines > .l { width:50px; height: 50px; color: #fff; float: left; background: #000; margin: 10px 0 0 0; display: none; }
.lines > .l:nth-child(2n){ background: rgba(0,0,0,.5); }

/* */

.line {
  color: #fff;
  font-size: 30px;
  width: 300px;
  height: 100px;
}

.line > .previous, .line > .next {
  width: 100px;
  height: 100%;
  background: blue;
  float: left;
}

.line > span {
  width: 100px;
  height: 100%;
  background: green;
  float: left;
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="lines">
	<div class="l l-1">1</div>
	<div class="l l-2">2</div>
	<div class="l l-3">3</div>
	<div class="l l-4">4</div>
	<div class="l l-5">5</div>
	<div class="l l-6">6</div>
	<div class="l l-7">7</div>
	<div class="l l-8">8</div>
	<div class="l l-9">9</div>
	<div class="l l-10">10</div>
	<div class="l l-11">11</div>
	<div class="l l-12">12</div>
	<div class="l l-13">13</div>
	<div class="l l-14">14</div>
	<div class="l l-15">15</div>
	<div class="l l-16">16</div>
	<div class="l l-17">17</div>
	<div class="l l-18">18</div>
	<div class="l l-19">19</div>
	<div class="l l-20">20</div>
</div>

<div class="line">
  <div class="previous">
    <div class="arrow">pre</div>
  </div>
	<span>1</span>
	<div class="next">
	  <div class="arrow">next</div>
	</div>	
</div>

＆＃13;

Answer 1

delay()不是为了能够停止和启动而构建的。而是使用setTimeout和clearTimeout

将showLines函数替换为：

var line_timers = {};
function showLines(lines){
    var container = 'lines';
    var t = 1000;
    for(var i=1;i<=20;i++) {
        var selector = '.'+container+' .l.l-' + i;
      clearTimeout(line_timers[selector]);
      if(i<=lines){
        $(selector).show(0);
        line_timers[selector]=setTimeout((function(x){
            return function(){
            $(x).hide(0);
          }
        })(selector),t);
      } else {
        $(selector).hide(0);
      }
    }
}

小提琴：https://jsfiddle.net/trex005/sm14hn79/

Answer 2

尝试dequeue（）：

function showLines(lines){
    var container = 'lines';
    var t = 1000;
    $('.' + container).find('.l').dequeue().hide();
    switch() ...
}

另一种选择是用fade / animate，setTimeout替换延迟，显示和隐藏，只需使用stop（）和clearTimeout（）

如何重置jQuery中的延迟？

2 个答案: