Задержка в конце нескольких действий

16 февраля 2021, 13:20

Всем привет. В одной функции есть два действия. В самом конце этих двух действий нужна пауза в 500 миллисекунд, чтобы в течении этого времени событие клик не работало) Каким способом это реализовать?

$(window).on('load', function () { 
 
$('.block').on('click', function () { 
$(this).toggleClass('red'); 
$('.block2').addClass('hide'); 
/*Вот здесь нужна пауза в 500 миллисекунд и чтобы во время данной паузы событие клик не работало*/ 
}); 
 
});

.block{ 
background: gray; 
text-align: center; 
width: 30%;   
margin-top: 50px; 
margin-left: 50px;  
font-size: 30px; 
user-select: none; 
} 
 
.block2{ 
background: gold; 
text-align: center; 
width: 30%;   
margin-top: 50px; 
margin-left: 50px;  
font-size: 30px; 
user-select: none;  
} 
 
 
.red{ 
 background: red;  
} 
 
.hide{ 
 display:none;  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div class="block">Кликай</div>  
   
<div class="block2">Удаление</div>

Answer 1

$(window).on('load', function () { 
 
$('.block').on('click', function () { 
if ($('.block').data("disabled")!="true") { 
$('.block').data("disabled","true"); 
$(this).toggleClass('red'); 
$('.block2').addClass('hide'); 
setTimeout(function() {$('.block').data("disabled","false");}, 500); 
} 
}); 
 
});

.block{ 
background: gray; 
text-align: center; 
width: 30%;   
margin-top: 50px; 
margin-left: 50px;  
font-size: 30px; 
user-select: none; 
} 
 
.block2{ 
background: gold; 
text-align: center; 
width: 30%;   
margin-top: 50px; 
margin-left: 50px;  
font-size: 30px; 
user-select: none;  
} 
 
 
.red{ 
 background: red;  
} 
 
.hide{ 
 display:none;  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div class="block">Кликай</div>  
   
<div class="block2">Удаление</div>