CODEWITHSUNDEEP
javascriptjquerycoffeescriptjquery-events
evfwcqcg
evfwcqcg

Reputation: 16345

Javascript execute function in the interval, when mouse is on element

I want to implement a simple thing (mock up here)

[+] 123 [-]

when user holds mouse on + or - the sum is increased or decreased.

So I write a simple script to do this (http://jsfiddle.net/wFAfy/3/), seems like it works, but I'm curious about efficiency/robustness of this approach since I'm not very experienced at front-end.

Or is there any better way to do this (maybe using plugins or something)?

HTML:

<p id="sum">0<p>
<a id="inc" href="#">inc on hover</a> | 
<a id="dec" href="#">dec on hover</a>

JavaScript:

sum = $("#sum")
inc = $("#inc")
dec = $("#dec")

currentSum = -> parseInt sum.text()

incSum = -> sum.text currentSum() + 1    
decSum = -> sum.text currentSum() - 1
    
run = (f, direction) ->
  -> 
    return unless running[direction] == true
    f()

running = { inc: false, dec: false }

inc.mouseenter -> running.inc = true
inc.mouseleave -> running.inc = false
dec.mouseenter -> running.dec = true
dec.mouseleave -> running.dec = false

setInterval run(incSum, "inc"), 200
setInterval run(decSum, "dec"), 200

Upvotes: 2

Views: 154

Answers (1)

Robert Messerle
Robert Messerle

Reputation: 3032

I agree with Ian's suggestion - here is a sample of that implementation:

$sum = $ '#sum'
$inc = $ '#inc'
$dec = $ '#dec'

currentSum = 0

incSum = -> $sum.text currentSum++
decSum = -> $sum.text currentSum--

interval = null

$inc.on
  'mouseenter' : ->
    interval = setInterval incSum, 200
    incSum()
  'mouseleave' : -> clearInterval interval

$dec.on
  'mouseenter' : ->
    interval = setInterval decSum, 200
    decSum()
  'mouseleave' : -> clearInterval interval

Upvotes: 1

Related Questions