Check if mouse button is down on a button/picture and keep executing a function after every few seconds till the button is pressed?

Question

Basically what I am trying to do is, I am trying to call a function and repeat the same function after every "n" seconds till the mouse button is pressed (MouseDown) on a button/picture and stop calling the function when the mouse button is released (MouseUp). I am trying to do this using JavaScript!

SOME REFERENCES

https://api.jquery.com/mousedown/

How can I detect a rightmouse button event on mousedown?

JavaScript: Check if mouse button down?

`I am trying to call a function` just after the user clicks on the mouse or not? — Mosh Feu, Jul 31 '16 at 09:33
Yes, and also repeat the same function after every "n" seconds till the button is pressed! — Software Builder, Jul 31 '16 at 09:34

jancha · Answer 1 · 2016-07-31T19:57:16.097

1

Not tested, but to give an idea.

var state = false;

function repeatingFunction(){
    if (!state){
        return;
    }
    console.log("Do something");
    setTimeout(repeatingFunction, 2000);
}
function mymousedown(ev){
    state = true;
    repeatingFunction();
}
function mymouseup(ev){
    state = false;
}
var obj = document.getElementById("foo");
obj.addEventListener("mousedown", mymousedown);
obj.addEventListener("mouseup", mymouseup);

edited Jul 31 '16 at 19:57

answered Jul 31 '16 at 09:36

jancha

4,916
1
24
39

I have tried but its not working. Check if I have made any error: https://jsfiddle.net/7Lke4t8y/ – Software Builder Jul 31 '16 at 09:51
yes, little error. should be document.getElement.. not window. – jancha Jul 31 '16 at 19:57

score 0 · Accepted Answer · answered Jul 31 '16 at 10:13

This should work for you:

var timerId = 0;

function onmousedown(ev) {
    console.log("Do something");  //first call right after mouse down
    timerId = setInterval(function () {
        console.log("Do something");
    }, 2000);
}
function onmouseup(ev) {
    clearInterval(timerId);
}

var obj = document.getElementById("foo");
obj.addEventListener("mousedown", onmousedown);
obj.addEventListener("mouseup", onmouseup);

fiddle: https://jsfiddle.net/kLnjh9zd/

Check if mouse button is down on a button/picture and keep executing a function after every few seconds till the button is pressed?

2 Answers2