Looping Javascript while mouse is held down

1

I’m new to Hype, so please forgive me if I’m asking a basic question. I’m working on an interactive graphic with a list of prices that can be raised or lowered using an accompanying pair of arrow buttons. Right now, each increase or decrease requires an individual click/tap, which isn’t a great experience if you want to change the prices significantly. I’d like to keep that increase/decrease happening in a loop for as long as the button stays down, like holding down a key on a computer keyboard.

Is there a reliable method for handling this in Hype? Any help greatly appreciated!

Thanks,
Jeff

2

If you share your doc @jeffpatt then we can give you a more specific solution.

There are many approaches to doing what you are asking but need to know more on how you are increasing your “list of prices”

3

Sure thing. Document attached here!

minwage.zip (118.1 KB)

4

ok. just change your priceUp() function to this:

var lineItem = element.id.replace("Up", "");
eval( "var num = " + lineItem + "Num;" );
eval( "var txt = " + lineItem + "Txt;" );
  
timer = setInterval( function () {
	num++;
		
	eval( lineItem + "Num = num");
	updateNumbers();
		
	}, 100)

and then run it “on mouse down” instead of “on mouse click” and then important run another function “On Mouse Up” and put this in it:

clearInterval(timer);

This will cancel the interval so it doesn’t keep going up. :wink:

You can then repeat the same for your priceDown() function. Of course placing the similar code inside the interval (timer)

from num-- down.

3 Likes
5

This worked perfectly, thank you.

One addition: I also needed add clearInterval to the “On Mouse Out” event, to keep a click-and-drag motion from creating an infinite loop.

Thanks again for your help!