Как обнулять таймаут jQuery при каждом клике?

321

07 апреля 2017, 23:25

Мне нужно чтобы при каждом клике на label рядом появлялась кнопка на 4 секунды, и при каждом клике нужно чтобы она появлялась заново на 4 сек. Сейчас же таймер общий для всех кликов. Как быть?

.check { 
  width: 200px; 
  height: 200px; 
  border: 1px solid #000; 
} 
 
.check label { 
  display: block; 
} 
 
.box-button { 
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<div class="check"> 
  <label for="check-1"> 
    																<input id="check-1" class="element-checkbox" name="check-1" value="Motul" type="checkbox"> 
    																<span>Motul</span> 
    															</label> 
  <label for="check-2"> 
    																<input id="check-2" class="element-checkbox" name="check-2" value="Motul" type="checkbox"> 
    																<span>Motul</span> 
    															</label> 
  <label for="check-3"> 
    																<input id="check-3" class="element-checkbox" name="check-3" value="Motul" type="checkbox"> 
    																<span>Motul</span> 
    															</label> 
  <button class="box-button">Показать</button> 
</div> 
 
<div class="check"> 
  <label for="check-4"> 
    																<input id="check-4" class="element-checkbox" name="check-4" value="Motul" type="checkbox"> 
    																<span>Motul</span> 
    															</label> 
  <label for="check-5"> 
    																<input id="check-5" class="element-checkbox" name="check-5" value="Motul" type="checkbox"> 
    																<span>Motul</span> 
    															</label> 
  <label for="check-6"> 
    																<input id="check-6" class="element-checkbox" name="check-6" value="Motul" type="checkbox"> 
    																<span>Motul</span> 
    															</label> 
  <button class="box-button">Показать</button> 
</div> 
 
<script> 
  $(".check label").click(function() { 
    $('.box-button').show(); 
    clearTimeout(timeout); 
    var timeout = setTimeout(function() { 
      $('.box-button').hide(); 
    }, 4000); 
 
    $(this).parent('.check').find('.box-button').appendTo(this); 
  }); 
</script>

Answer 1

Если кнопка нужна одна на все блоки, то timeout нужно вынести с более общую область видимости (хоть в window)

Например так:

$(function($) {
  var globalTimeout;
  $(".check label").click(function() {
    var $parentBox = $(this).closest('.check');
    $('.box-button').hide();
    $('.box-button', $parentBox).show();
    clearTimeout(globalTimeout);
    globalTimeout = setTimeout(function() {
      $('.box-button').hide();
    }, 4000);
    $('.box-button', $parentBox).appendTo(this);
  });
});

Вариант с независимыми кнопками в пределах блока:

$(".check label").click(function() { 
  var $parentBox = $(this).closest('.check'); 
  $('.box-button', $parentBox).show(); 
  clearTimeout($parentBox.data('timeout')); 
  $parentBox.data('timeout', setTimeout(function() { 
    $('.box-button', $parentBox).hide(); 
  }, 4000)); 
  $('.box-button', $parentBox).appendTo(this); 
});

.check { 
  width: 200px; 
  height: 200px; 
  border: 1px solid #000; 
} 
 
.check label { 
  display: block; 
} 
 
.box-button { 
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<div class="check"> 
  <label for="check-1"> 
    <input id="check-1" class="element-checkbox" name="check-1" value="Motul" type="checkbox"><span>Motul</span> 
  </label> 
  <label for="check-2"> 
    <input id="check-2" class="element-checkbox" name="check-2" value="Motul" type="checkbox"><span>Motul</span> 
  </label> 
  <label for="check-3"> 
    <input id="check-3" class="element-checkbox" name="check-3" value="Motul" type="checkbox"><span>Motul</span> 
  </label> 
    <button class="box-button">Показать</button> 
</div> 
 
<div class="check"> 
  <label for="check-4"> 
    <input id="check-4" class="element-checkbox" name="check-4" value="Motul" type="checkbox"><span>Motul</span> 
  </label> 
  <label for="check-5"> 
    <input id="check-5" class="element-checkbox" name="check-5" value="Motul" type="checkbox"><span>Motul</span> 
  </label> 
  <label for="check-6"> 
    <input id="check-6" class="element-checkbox" name="check-6" value="Motul" type="checkbox"><span>Motul</span> 
  </label> 
  <button class="box-button">Показать</button> 
</div>

Answer 2

Так надо поправить.

.check { 
  width: 200px; 
  height: 200px; 
  border: 1px solid #000; 
} 
 
.check label { 
  display: block; 
} 
 
.box-button { 
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<div class="check"> 
  <label for="check-1"><input id="check-1" class="element-checkbox" name="check-1" value="Motul" type="checkbox"><span>Motul</span></label> 
  <label for="check-2"><input id="check-2" class="element-checkbox" name="check-2" value="Motul" type="checkbox"><span>Motul</span></label> 
  <label for="check-3"><input id="check-3" class="element-checkbox" name="check-3" value="Motul" type="checkbox"><span>Motul</span></label> 
  <button class="box-button">Показать</button> 
</div> 
 
<div class="check"> 
  <label for="check-4"><input id="check-4" class="element-checkbox" name="check-4" value="Motul" type="checkbox"><span>Motul</span></label> 
  <label for="check-5"><input id="check-5" class="element-checkbox" name="check-5" value="Motul" type="checkbox"><span>Motul</span></label> 
  <label for="check-6"><input id="check-6" class="element-checkbox" name="check-6" value="Motul" type="checkbox"><span>Motul</span></label> 
  <button class="box-button">Показать</button> 
</div> 
 
<script> 
  $(".check label").click(function() { 
    var btn = $(this).parent('.check').find('.box-button'); 
    $(btn).appendTo(this); 
    $(btn).show(); 
 
    clearTimeout($(btn).data('timer')); 
    $(btn).data('timer', setTimeout(function() { 
      $(btn).hide(); 
    }, 4000)); 
 
  }); 
</script>