javascript - 按下鼠标按钮时重复执行代码

Question

$('.test').click(function(){
$('.act').removeClass('act');
$(this).addClass('act');
});

$('#btn').mousedown(function(){
$('.act').insertBefore($('.act').prev());
});

.test{
cursor:pointer;
}

.act{
background:gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='test'>323</div>
<div class='test'>525</div>
<div class='test'>727</div>
<div class='test'>929</div>
<div class='test act'>453</div>
<br>
<button id='btn'>CLICK</button>

按住按钮，我需要继续 act 以移动到顶部，而无需再次点击。

怎么做？

Answer 1

在 mousedown 上使用 setInterval，然后在 mouseup 上使用 clearInterval:

$('.test').click(function(){
$('.act').removeClass('act');
$(this).addClass('act');
});

var intervalId;
$('#btn').mousedown(function(){
    intervalId = setInterval(function() {
        $('.act').insertBefore($('.act').prev());
    }, 500);
}).mouseup(function() {
    clearInterval(intervalId);
});

.test{
cursor:pointer;
}

.act{
background:gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='test'>323</div>
<div class='test'>525</div>
<div class='test'>727</div>
<div class='test'>929</div>
<div class='test act'>453</div>
<br>
<button id='btn'>CLICK</button>