클릭하고 있으면 숫자 계속 증가...
본문
버튼을 1초이상 누르고 있으면
카운트가 계속 증가되는 스크립트를 만들려고 합니다.
<button id="counting">증가</button>
<input id="result_count" value="">
counting을 1초 이상 누르고 있으면 result_count의 숫자가 계속 증가하게 할려면 어떻게 해야 하나요?
0.1초 정도 단위로 숫자가 계속 증가하면 좋겠는데..
구글링을 해봐도 마땅한 소스가 보이질 않네요
답변 3
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<button id="counting">증가</button>
<input id="result_count" value="">
<script>
var cnt = 0;
var time = 100;//1000 = 1초
var interval = null;
function countup(){
cnt = cnt + 1;
$("#result_count").val(cnt).blur();
}
$("#counting").mousedown(function() {
interval = setInterval("countup()", time);
});
$("#counting").mouseup(function() {
clearInterval(interval);
});
</script>
https://stackoverflow.com/questions/14226803/wait-5-seconds-before-executing-next-line
Promise를 이용한 방법도 있네요
<script>
/*
//0.1초마다
var act_time = 100;//1000 = 1초
//0.5초뒤 실행
var chk_time = 500;
var vol_cnt = Number($(".num_volume").val().replace(/\D/g, ''));
var interval = null;
var chk_intv = null;
function countup(){
vol_cnt = vol_cnt + 1;
$(".num_volume").val(vol_cnt).blur();
}
function countdown(){
vol_cnt = vol_cnt - 1;
$(".num_volume").val(vol_cnt).blur();
}
function check_time_up(){
clearInterval(chk_intv);
interval = setInterval("countup()", act_time);
}
function check_time_down(){
clearInterval(chk_intv);
interval = setInterval("countdown()", act_time);
}
$(".quantity__plus").mousedown(function() {
chk_intv = setInterval("check_time_up()", chk_time);
});
$(".quantity__minus").mousedown(function() {
chk_intv = setInterval("check_time_down()", chk_time);
});
$(".quantity").mouseup(function() {
clearInterval(chk_intv);
clearInterval(interval);
vol_cnt = Number($(".num_volume").val().replace(/\D/g, ''));
});
*/
</script>