如何重置jQuery中的延遲？

Question

我正在做一臺老虎機，我想在有人點擊添加時顯示線條或者減去一條線。我正在使用下面的代碼;問題在於，當有人快速點擊（比延遲時間快）時，會產生比預期更大的延遲。這裏是一個筆畫演示（和JSFiddle）

function arrowNumbers(id,min,max,difference){ 
 
\t if ((min === undefined) || (min < 0)){ 
 
\t \t min = 1; 
 
\t } 
 
\t if((difference === undefined)) { 
 
\t \t difference = 1; 
 
\t } 
 
\t var previousArrow = $('.'+id+' .previous'); 
 
\t var nextArrow = $('.'+id+' .next'); 
 

 
\t var screenNumbers = $('.'+id+' span'); 
 
\t var actualNumber = $('.'+id+' span').text(); 
 

 
\t var n = actualNumber; 
 

 
\t previousArrow.click(function(){ 
 
\t \t if (n>min){ 
 
\t \t \t if (parseInt(difference)>=parseInt(n)) 
 
\t \t \t \t n = min; 
 
\t \t \t else 
 
\t \t \t \t n = parseInt(n)-parseInt(difference); 
 
\t \t \t showNumber(n); 
 
\t \t \t if (id=='line') 
 
\t \t \t \t showLines(n); 
 
\t \t } 
 
\t }); 
 

 
\t nextArrow.click(function(){ 
 
\t \t if (n<max){ 
 
\t \t \t if (parseInt(difference)+parseInt(n)>max) 
 
\t \t \t \t n = max; 
 
\t \t \t else 
 
\t \t \t \t n = parseInt(n)+parseInt(difference); 
 
\t \t \t showNumber(n); 
 
\t \t \t if (id=='line') 
 
\t \t \t \t showLines(n); 
 
\t \t } 
 
\t }); 
 

 
\t function showNumber(n){ 
 
\t \t screenNumbers.text(n); 
 
\t } 
 
} 
 

 
function showLines(lines){ 
 
\t var container = 'lines'; 
 
\t var t = 1000; 
 
\t switch (lines) { 
 
\t \t case 20: $('.'+container+' .l.l-20').show(0).delay(t).hide(0); 
 
\t \t case 19: $('.'+container+' .l.l-19').show(0).delay(t).hide(0); 
 
\t \t case 18: $('.'+container+' .l.l-18').show(0).delay(t).hide(0); 
 
\t \t case 17: $('.'+container+' .l.l-17').show(0).delay(t).hide(0); 
 
\t \t case 16: $('.'+container+' .l.l-16').show(0).delay(t).hide(0); 
 
\t \t case 15: $('.'+container+' .l.l-15').show(0).delay(t).hide(0); 
 
\t \t case 14: $('.'+container+' .l.l-14').show(0).delay(t).hide(0); 
 
\t \t case 13: $('.'+container+' .l.l-13').show(0).delay(t).hide(0); 
 
\t \t case 12: $('.'+container+' .l.l-12').show(0).delay(t).hide(0); 
 
\t \t case 11: $('.'+container+' .l.l-11').show(0).delay(t).hide(0); 
 
\t \t case 10: $('.'+container+' .l.l-10').show(0).delay(t).hide(0); 
 
\t \t case 9: $('.'+container+' .l.l-9').show(0).delay(t).hide(0); 
 
\t \t case 8: $('.'+container+' .l.l-8').show(0).delay(t).hide(0); 
 
\t \t case 7: $('.'+container+' .l.l-7').show(0).delay(t).hide(0); 
 
\t \t case 6: $('.'+container+' .l.l-6').show(0).delay(t).hide(0); 
 
\t \t case 5: $('.'+container+' .l.l-5').show(0).delay(t).hide(0); 
 
\t \t case 4: $('.'+container+' .l.l-4').show(0).delay(t).hide(0); 
 
\t \t case 3: $('.'+container+' .l.l-3').show(0).delay(t).hide(0); 
 
\t \t case 2: $('.'+container+' .l.l-2').show(0).delay(t).hide(0); 
 
\t \t case 1: $('.'+container+' .l.l-1').show(0).delay(t).hide(0); 
 
\t } 
 
} 
 

 
arrowNumbers('line',1,20);

.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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="lines"> 
 
\t <div class="l l-1">1</div> 
 
\t <div class="l l-2">2</div> 
 
\t <div class="l l-3">3</div> 
 
\t <div class="l l-4">4</div> 
 
\t <div class="l l-5">5</div> 
 
\t <div class="l l-6">6</div> 
 
\t <div class="l l-7">7</div> 
 
\t <div class="l l-8">8</div> 
 
\t <div class="l l-9">9</div> 
 
\t <div class="l l-10">10</div> 
 
\t <div class="l l-11">11</div> 
 
\t <div class="l l-12">12</div> 
 
\t <div class="l l-13">13</div> 
 
\t <div class="l l-14">14</div> 
 
\t <div class="l l-15">15</div> 
 
\t <div class="l l-16">16</div> 
 
\t <div class="l l-17">17</div> 
 
\t <div class="l l-18">18</div> 
 
\t <div class="l l-19">19</div> 
 
\t <div class="l l-20">20</div> 
 
</div> 
 

 
<div class="line"> 
 
    <div class="previous"> 
 
    <div class="arrow">pre</div> 
 
    </div> 
 
\t <span>1</span> 
 
\t <div class="next"> 
 
\t <div class="arrow">next</div> 
 
\t </div> \t 
 
</div>

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（）：

​​3210

另一種選擇是，以取代延遲，顯示與隱藏淡入淡出/動畫，setTimeout，並簡單地使用stop（）和clearTimeout（）