How to reset delay in jQuery?
<p>I am doing a slot machine, I want to show lines when someone clicks to add or 
subtract a line. I'm using the following code; the problem is that when someone clicks quickly (faster than delay time) it produce a bigger delay than expected. Here is a demostration (and <a href="https://jsfiddle.net/arglab/0f0rdoh7/1/" rel="nofollow noreferrer">JSFiddle</a>)</p>

<p><a href="https://i.stack.imgur.com/RGyFz.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RGyFz.gif" alt="Bug"></a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function arrowNumbers(id,min,max,difference){
 if ((min === undefined) || (min &lt; 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&gt;min){
   if (parseInt(difference)&gt;=parseInt(n))
    n = min;
   else
    n = parseInt(n)-parseInt(difference);
   showNumber(n);
   if (id=='line')
    showLines(n);
  }
 });

 nextArrow.click(function(){
  if (n&lt;max){
   if (parseInt(difference)+parseInt(n)&gt;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);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.lines {
  width: 500px;
  height: 200px;
}

.lines &gt; .l { width:50px; height: 50px; color: #fff; float: left; background: #000; margin: 10px 0 0 0; display: none; }
.lines &gt; .l:nth-child(2n){ background: rgba(0,0,0,.5); }

/* */

.line {
  color: #fff;
  font-size: 30px;
  width: 300px;
  height: 100px;
}

.line &gt; .previous, .line &gt; .next {
  width: 100px;
  height: 100%;
  background: blue;
  float: left;
}

.line &gt; span {
  width: 100px;
  height: 100%;
  background: green;
  float: left;
  display: block;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;div class="lines"&gt;
 &lt;div class="l l-1"&gt;1&lt;/div&gt;
 &lt;div class="l l-2"&gt;2&lt;/div&gt;
 &lt;div class="l l-3"&gt;3&lt;/div&gt;
 &lt;div class="l l-4"&gt;4&lt;/div&gt;
 &lt;div class="l l-5"&gt;5&lt;/div&gt;
 &lt;div class="l l-6"&gt;6&lt;/div&gt;
 &lt;div class="l l-7"&gt;7&lt;/div&gt;
 &lt;div class="l l-8"&gt;8&lt;/div&gt;
 &lt;div class="l l-9"&gt;9&lt;/div&gt;
 &lt;div class="l l-10"&gt;10&lt;/div&gt;
 &lt;div class="l l-11"&gt;11&lt;/div&gt;
 &lt;div class="l l-12"&gt;12&lt;/div&gt;
 &lt;div class="l l-13"&gt;13&lt;/div&gt;
 &lt;div class="l l-14"&gt;14&lt;/div&gt;
 &lt;div class="l l-15"&gt;15&lt;/div&gt;
 &lt;div class="l l-16"&gt;16&lt;/div&gt;
 &lt;div class="l l-17"&gt;17&lt;/div&gt;
 &lt;div class="l l-18"&gt;18&lt;/div&gt;
 &lt;div class="l l-19"&gt;19&lt;/div&gt;
 &lt;div class="l l-20"&gt;20&lt;/div&gt;
&lt;/div&gt;

&lt;div class="line"&gt;
  &lt;div class="previous"&gt;
    &lt;div class="arrow"&gt;pre&lt;/div&gt;
  &lt;/div&gt;
 &lt;span&gt;1&lt;/span&gt;
 &lt;div class="next"&gt;
   &lt;div class="arrow"&gt;next&lt;/div&gt;
 &lt;/div&gt; 
&lt;/div&gt;</code></pre>
</div>
</div>
</p>