jQuery按钮循环不起作用

Question

我想让按钮在按下时做一个循环，而不是点击。

这不是很容易解释，但我想触发一个循环，每按四分之一秒钟，连续按下按钮时加1到“小时”计数，比按50秒分钟和秒钟更快。这里是我的代码：

$('#plus1').mousedown(function() { 
    setTimeout(function() { 
    if (parseInt($('#Hours').html()) < 23) { 
     $('#Hours').html(parseInt($('#Hours').html())+1); 
    } else { 
     $('#Hours').html(0); 
    } 
    }, 250); 
}); 

不幸的是，当我按下按钮，它只是加1，并停止，即使我按下按钮。我不知道该怎么做，我尝试了一切。甚至在mousedown之前放置超时功能。

如果有人可以解释如何进行，它会友好的：3。

链接到我的网页看起来是这样的：

Answer 1

$('#plus1').mousedown(function() { 
    $(this).on('mouseup', stopCount); 

    function stopCount(token) { 
    clearInterval(token); 
    } 

    let token = setInterval(function() { 
    if (parseInt($('#Hours').html()) < 23) { 
    $('#Hours').html(parseInt($('#Hours').html())+1); 
    } else { 
    $('#Hours').html(0); 
    } 
}, 250); 

}); 

尝试使用，而不是setTimeout的setInterval的，当鼠标按下事件被注册广告触发回调清除间隔

Answer 2

你mouseUp事件可以得到你所要求的使用setInterval和stopInterval函数，但我认为最好是将一个类应用于元素以查看该按钮是否被按下。

一个小例子：

var clockTime = 0; // variable that is intended to contain the number of seconds 
 

 
function updateTime(){ // Function to display the time and to calculate the seconds, minutes, and hours 
 
    if(clockTime < 0) clockTime = 3600 * 24 - 1; // set limit clock 
 
    if(clockTime >= 3600 * 24) clockTime = 0; 
 
    
 
    $(".clock_h").text(Math.floor((clockTime/3600) % 3600)); 
 
    $(".clock_m").text(Math.floor((clockTime/60) % 60)); 
 
    $(".clock_s").text(clockTime % 60); 
 
} 
 

 
function loopTime($e){ // Function that detects the presence of the PRESS class and repeats itself when this class is not removed 
 
    if($e.hasClass('press')){ 
 
    var increment = $e.hasClass('clock_plus') ? 1 : -1; 
 
    switch($e.parent().attr('data-time')){ 
 
     case 'h': 
 
      clockTime += increment * 3600; 
 
     break; 
 
     case 'm': 
 
      clockTime += increment * 60; 
 
     break; 
 
     case 's': 
 
      clockTime += increment; 
 
     break; 
 
    } 
 
    
 
    setTimeout(function(){ 
 
     loopTime($e); 
 
    },200); 
 
    } 
 
    updateTime(); 
 
} 
 

 
$(function(){ // When loading the page, apply the events to the buttons 
 
    $('.clock_plus, .clock_minus').mousedown(function(){ 
 
     loopTime($(this).addClass('press')); 
 
    }).mouseout(function(){ 
 
     $(this).removeClass('press'); 
 
    }).mouseup(function(){ 
 
     $(this).removeClass('press'); 
 
    }); 
 
});

.clock{ 
 
    float: left; 
 
    width: 70px; 
 
    text-align: center; 
 
    position: relative; 
 
    margin-left: 10px; 
 
} 
 

 
.clock button{ 
 
    width: 100%; 
 
    height: 25px; 
 
} 
 

 
.clock span{ 
 
    font-size: 26px; 
 
} 
 

 
.clock .clock_sep{ 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 100%; 
 
    margin-top: -18px; 
 
    font-size: 30px; 
 
    line-height: 30px; 
 
} 
 

 
.press{ 
 
    border: solid 1px red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<div class="clock" data-time="h"> 
 
    <button class="clock_plus">+</button> 
 
    <span class="clock_sep">:</span> 
 
    <span class="clock_h">00</span> 
 
    <button class="clock_minus">-</button> 
 
</div> 
 

 
<div class="clock" data-time="m"> 
 
    <button class="clock_plus">+</button> 
 
    <span class="clock_sep">:</span> 
 
    <span class="clock_m">00</span> 
 
    <button class="clock_minus">-</button> 
 
</div> 
 

 
<div class="clock" data-time="s"> 
 
    <button class="clock_plus">+</button> 
 
    <span class="clock_s">00</span> 
 
    <button class="clock_minus">-</button> 
 
</div>

Answer 3

对于那些谁发现帖子以后，我发现自己的作品代码（感谢达伦斯波尔丁为帮助过我的样本很多）

我修修补补，并提出一些研究，这些代码就像我想：

$('#plus1').mousedown(function() { 

    var token = setInterval(function() { 
    if (parseInt($('#Hours').html()) < 23) { 
     $('#Hours').html(parseInt($('#Hours').html())+1); 
    } else { 
     $('#Hours').html(0); 
    } 
}, 250); 

$('#plus1').mouseup(function() { 
    clearInterval(token); 
    }); 

}); 

谢谢:)。