Repeating the function on .mousedown. Can't make it work

1

Hello Campers,

I’m working on my pomodoro timer. I have two buttons. #tplus (below) that adds minutes to the timer, and the #minus button with opposite functionality. I want them, when .mousedown, to add/subtract minutes from the timer quicker, so the user doesn’t have to click so many times, when changing the value.

In my head i thought this would work:

   //  $('#plus').click(function (){plusOne();}); // end plus

     // I commented out the line at the top,  to try it with mousedown. 
// That line would add one minute per click.
      
  
        $('#plus').mousedown(function() {
    var quickAdd = setInterval(plusOne(), 300);
        }).mouseUp(function() {
            clearInterval(quickAdd);
        });

Why doesn’t it work? :confused:

Here’s code on codepen: https://codepen.io/RycerzPegaza/pen/OXAqBG?editors=1010

2
  1. plusOne should be callback - remove parens
  2. quickAdd is not visible in .mouseup function - move it outside
  3. you have a typo in .mouseup()

Your code revisited:

var quickAdd;
$('#plus').mousedown(function() {
  quickAdd = setInterval(plusOne, 600);
}).mouseup(function() {
  clearInterval(quickAdd);
});
1 Like
3

The code you helped me with worked, but I wanted to something more complicated - i wanted for adding/subtracting values to add/subtract quicker if the click is held longer.

So i thought i put setTimeout() in setInterval(). But of course it didn’t work. It’s possibly something with the scope. I wasn’t able to find an answer on stackoverflow though :confused:

  var quickAdd, quickSubt, quickerAdd = null, quickerAddFire;
            $('#plus').mousedown(function () {
                quickAdd = setInterval(plusOne, 250);
                quickerAdd = setTimeout(funtion() {
                quickerAddFire = setInterval(plusOne, 100);                 
                }, 2000);
        
            }).mouseup(function () {
                clearInterval(quickAdd);
                clearTimeout(quickerAdd);
                clearInterval(quickerAddFire);
            });
4

Try this:

let quickAdd, tOut // <-- new variable tOut

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

  quickAdd = setInterval(plusOne, 250); // start interval

  tOut = setTimeout(() => { // after 2 seconds
    clearInterval(quickAdd); // reset current interval...
    quickAdd = setInterval(plusOne, 100); // ...and start new interval
  }, 2000)


}).mouseup(function () {
  clearInterval(quickAdd); // clear interval timer
  clearTimeout(tOut); // clear timeout timer
});

P.S.

() => {

is the same as

function() {

just less typing :slight_smile:

5

I think i’ll need to add a string add the bottom “made by jenovs” :smiley:

I know about those shortcuts and other features introduced with E6, i’m not comfortable with them yet, but i’m sure i will learn them soon :slight_smile:

it works, thanks.

Would you mind telling me why my version didn’t work?

6

Your code should be working, it is basically the same code as I wrote. It was early in the morning and I was too lazy to look for the exact error, so I just wrote my version :innocent:

Now that you asked, I took a look and found the error in your code - it’s on line 4 :grin: See if you can spot it (this kind of errors is why I stopped using codepen).

7

Today i started using JSHint locally, it’s a great help. I found that ‘funtion’ … god… d.mn it :smiley: