jQuery button loop not working

Question

I want to make my button doing a loop while pressed, and not clicked.

It's not easy to explain but I want to trigger a loop adding 1 to the "Hour" count every quarter of seconds, when the button is pressed continuously, to be faster than pushing 50 time for minutes and seconds. Here is my code :

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

Unfortunately when I press the button, it just add 1 and stop even if I push the button. I have no idea what to do, I tried everything. Even putting the timeout function before the mousedown.

If someone can explain how to proceed it'd be kind :3.

Link to what my page looks like :

Probably duplicate: https://stackoverflow.com/questions/15505272/javascript-while-mousedown — Mateusz Marchel, Sep 17 '17 at 00:11

score 0 · Answer 1 · answered Sep 17 '17 at 00:08

0

$('#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);

});

try using setInterval instead of setTimeout, when the mousedown event is registered ad a mouseup event which triggers a callback to clear the interval

answered Sep 17 '17 at 00:08

Daron Spaulding

71
5

I tested but it appears the function don't stop when the mouse is released and that the timer add verytime i press the button, so the count don't stop but it's faster. :/ – Shishigami Reishin Sep 18 '17 at 10:55

Pinguto · Answer 2 · 2017-09-17T09:50:23.977

you can get what you ask for using the setInterval and stopInterval functions, but I think it's best to apply a class to the element to see if the button is pressed or not.

a small example:

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>

score 0 · Accepted Answer · answered Sep 18 '17 at 11:41

For those who find that post later on, I've found myself a code that works (Thanks to Daron Spaulding for the sample that helped me a lot)

I tinkered and make some researches and that code works like I wanted :

$('#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);
  });

});

Thanks :).

jQuery button loop not working

3 Answers3